/*!
 * Nodalbank — home page design system
 *
 * The structural system (type scale, spacing rhythm, container widths, radii,
 * button geometry, dual light/dark theming) is modelled on the reference
 * layout the brief specified. Every brand-carrying value — hue, wordmark,
 * copy — is Nodalbank's own.
 *
 * Reference structure                Nodalbank substitution
 * ---------------------------------  ----------------------------------
 * accent   bronze  #98836e           gold   #cba352  (GeneralSetting.base_color)
 * cta      teal    #14b6b1           navy   #2a3962  (existing invester theme)
 * ink-base         #0b0c10           navy-black #10141f
 * bg-elev          #f7f4ef           warm off-white #faf7f0
 *
 * Namespaced `nx-` so it cannot collide with main.css or the Bootstrap build
 * already loaded by layouts/app.blade.php.
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

.nx {
    /* -- Brand primitives ------------------------------------------------- */
    --nx-navy-900: #10141f;
    --nx-navy-800: #1a2338;
    --nx-navy-700: #223050;
    --nx-navy-600: #2a3962;
    --nx-navy-500: #3c5088;
    --nx-gold-600: #a8853f;
    --nx-gold-500: #cba352;
    --nx-gold-400: #dcbb77;
    --nx-sand-100: #faf7f0;
    --nx-sand-200: #efe7d6;
    --nx-paper: #ffffff;
    --nx-green-600: #1f9d6b;
    --nx-red-600: #cc3b3b;

    /* -- Semantic: light is the default theme ----------------------------- */
    --nx-bg: var(--nx-paper);
    --nx-bg-elev: var(--nx-sand-100);
    --nx-bg-card: var(--nx-paper);
    --nx-ink: var(--nx-navy-900);
    --nx-ink-dim: #555e67;
    --nx-ink-mute: #7e8c96;
    --nx-line: rgba(16, 20, 31, 0.12);
    --nx-line-strong: rgba(16, 20, 31, 0.24);
    --nx-accent: var(--nx-gold-500);
    --nx-cta: var(--nx-navy-600);
    --nx-cta-hover: var(--nx-navy-500);
    --nx-on-cta: #ffffff;
    --nx-link: var(--nx-navy-600);
    --nx-link-hover: var(--nx-navy-500);
    --nx-positive: var(--nx-green-600);
    --nx-negative: var(--nx-red-600);
    --nx-ring: var(--nx-navy-600);
    --nx-glow-rgb: 203, 163, 82;

    /* -- Layout ------------------------------------------------------------
       Container ladder and gutter follow the reference system. */
    --nx-maxw-small: 984px;
    --nx-maxw-inner: 1048px;
    --nx-maxw: 1360px;
    --nx-gutter: 1.5rem;

    /* -- Radius ------------------------------------------------------------
       The reference sets --radius: 0. Surfaces are square; only buttons and
       pill controls carry a radius. */
    --nx-radius: 0;
    --nx-radius-btn: 0.5rem;
    --nx-radius-pill: 999px;

    /* -- Type --------------------------------------------------------------
       Heading weight is 400 — the reference system uses regular weight at
       display sizes, not bold. */
    --nx-font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --nx-weight-heading: 400;
    --nx-lh-tight: 1.1;
    --nx-lh-heading: 1.2;
    --nx-lh-body: 1.6;

    /* -- Motion ------------------------------------------------------------ */
    --nx-ease: ease;
    --nx-dur-btn: 0.14s;
    --nx-dur: 0.3s;
    --nx-dur-slow: 0.42s;
}

/* Dark theme. Applied by adding .nx--dark, and honoured automatically when the
   visitor's OS asks for dark unless the page has explicitly opted into light. */
.nx--dark,
.nx.nx--dark {
    /* Same surface as the authentication form card. */
    --nx-bg: #101014;
    --nx-bg-elev: #17171d;
    --nx-bg-card: #17171d;
    --nx-ink: #f4f7fa;
    --nx-ink-dim: #b2bec9;
    --nx-ink-mute: #8b98a5;
    --nx-line: rgba(244, 247, 250, 0.12);
    --nx-line-strong: rgba(244, 247, 250, 0.22);
    --nx-cta: var(--nx-gold-500);
    --nx-cta-hover: var(--nx-gold-400);
    --nx-on-cta: var(--nx-navy-900);
    --nx-link: var(--nx-gold-400);
    --nx-link-hover: var(--nx-gold-500);
}

/* ==========================================================================
   1b. Page surface
   ==========================================================================
   The footer is rendered by layouts/frontend outside .nx, so the page colour
   cannot be set by wrapping more markup. :has() scopes it to pages that
   actually carry the dark home — every other page stays untouched.
   Literal values here because the -nx- tokens live on .nx, not on body. */

body:has(.nx--dark) {
    background: #101014;
}

body:has(.nx--dark) footer {
    background: #101014;
    color: #9baab5;
}

body:has(.nx--dark) footer .footer-text,
body:has(.nx--dark) footer .copy-right-text {
    color: #9baab5;
}

body:has(.nx--dark) footer a {
    color: #f4f7fa;
}

body:has(.nx--dark) footer a:hover {
    color: #cba352;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

.nx {
    font-family: var(--nx-font);
    color: var(--nx-ink);
    background: var(--nx-bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

.nx *,
.nx *::before,
.nx *::after {
    box-sizing: border-box;
}

/* -- Containers ---------------------------------------------------------- */

.nx-container,
.nx-container--inner,
.nx-container--small {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--nx-gutter);
}

.nx-container { max-width: var(--nx-maxw); }
.nx-container--inner { max-width: var(--nx-maxw-inner); }
.nx-container--small { max-width: var(--nx-maxw-small); }

/* -- Section rhythm ------------------------------------------------------
   The reference stacks sections with margin-top rather than symmetric
   padding: 0 on mobile, 4rem from tablet, 6rem from desktop. */

/* The reference can afford margin-top: 0 here because its sections carry their
   own internal padding; ours do not, so without this the panels butt straight
   into the section above on phones. Overridden from 768px up, so the desktop
   rhythm is untouched. */
.nx-section {
    margin-top: 3rem;
}

.nx-section--band {
    background: var(--nx-bg-elev);
    padding-block: 3rem;
}

.nx-section--inverse {
    background: var(--nx-navy-900);
    color: #f4f7fa;
    padding-block: 3rem;
    --nx-ink: #f4f7fa;
    --nx-ink-dim: #b2bec9;
    --nx-line: rgba(244, 247, 250, 0.12);
    --nx-bg-card: rgba(255, 255, 255, 0.04);
    --nx-link: var(--nx-gold-400);
}

@media (min-width: 768px) {
    .nx-section { margin-top: 4rem; }
    .nx-section--band,
    .nx-section--inverse { padding-block: 4rem; }
}

@media (min-width: 1024px) {
    .nx-section { margin-top: 6rem; }
    .nx-section--band,
    .nx-section--inverse { padding-block: 6rem; }
}

/* ==========================================================================
   3. Type scale
   ========================================================================== */

/* main.css sets `h1..h6 { color: hsl(var(--heading)) }`. An explicit colour on
   the element always beats an inherited one, so every heading has to name its
   own or it stays dark whatever the surface underneath. */
.nx-h1,
.nx-h2,
.nx-h3,
.nx-h4,
.nx-h5 {
    font-weight: var(--nx-weight-heading);
    margin: 0;
    color: var(--nx-ink);
    text-wrap: balance;
}

.nx-h1 { font-size: 2.25rem; line-height: var(--nx-lh-tight); }
.nx-h2 { font-size: 2rem;    line-height: var(--nx-lh-heading); }
.nx-h3 { font-size: 1.75rem; line-height: var(--nx-lh-heading); }
.nx-h4 { font-size: 1.5rem;  line-height: 1.4; }
.nx-h5 { font-size: 1.25rem; line-height: 1.4; }

@media (min-width: 768px) {
    .nx-h1 { font-size: 3rem; }
    .nx-h2 { font-size: 2.25rem; }
    .nx-h3 { font-size: 2rem; }
    .nx-h4 { font-size: 1.75rem; line-height: 1.35; }
    .nx-h5 { font-size: 1.5rem; }
}

@media (min-width: 1024px) {
    .nx-h1 { font-size: 3.5rem; }
    .nx-h2 { font-size: 3rem; }
    .nx-h3 { font-size: 2.5rem; }
    .nx-h4 { font-size: 2rem; }
}

/* Oversized hero display, tracking the reference's largest fluid step. */
.nx-display {
    font-size: clamp(40px, 4.6vw, 64px);
    line-height: 1.05;
    color: var(--nx-ink);
    font-weight: var(--nx-weight-heading);
    letter-spacing: -0.01em;
    margin: 0;
    text-wrap: balance;
}

.nx-lead {
    font-size: clamp(16px, 1.3vw, 20px);
    line-height: var(--nx-lh-body);
    color: var(--nx-ink-dim);
    margin: 0;
    max-width: 62ch;
}

.nx-eyebrow {
    display: inline-block;
    font-size: clamp(14px, 1.1vw, 16px);
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--nx-accent);
    margin: 0 0 0.75rem;
}

.nx-head {
    margin-bottom: 2.5rem;
}

.nx-head--center {
    text-align: center;
}

.nx-head--center .nx-lead {
    margin-inline: auto;
}

/* ==========================================================================
   4. Buttons
   ==========================================================================
   Distinctive reference geometry: text is left-aligned and content sits on the
   baseline (align-items: flex-end) with asymmetric padding — more room on the
   left and below than on the right and above. */

.nx-btn {
    display: inline-flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-shrink: 0;
    text-align: left;
    font-family: inherit;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    border: 0;
    border-radius: var(--nx-radius-btn);
    padding: 0.625rem 0.625rem 0.75rem 1.25rem;
    min-height: 48px;
    cursor: pointer;
    transition-property: color, background-color, border-color, opacity, box-shadow, transform, filter;
    transition-duration: var(--nx-dur-btn);
    transition-timing-function: var(--nx-ease);
}

@media (min-width: 768px) {
    .nx-btn {
        font-size: 1.25rem;
        padding: 0.75rem 0.75rem 1rem 1.5rem;
    }
}

/* The label sets the button's width, so it must never wrap. */
.nx-btn > span { white-space: nowrap; }

/* An inline <svg> with only a viewBox has no intrinsic size: it collapsed to
   0x0 where the button hugged its content and ballooned to 103px once the
   button stretched full width on a phone. Pin it to the reference's 24px. */
.nx-btn svg {
    width: 24px;
    height: 24px;
    flex: none;
}

/* The base padding keeps the right side tight because the reference always
   pairs a label with a trailing icon. Without one the button reads lopsided,
   so match the right inset to the left. */
.nx-btn:not(:has(svg)) { padding-right: 1.25rem; }

@media (min-width: 768px) {
    .nx-btn:not(:has(svg)) { padding-right: 1.5rem; }
}

.nx-btn:hover { text-decoration: none; }
.nx-btn:active { transform: translateY(1px); }

.nx-btn:focus-visible {
    outline: 3px solid var(--nx-ring);
    outline-offset: 2px;
}

.nx-btn--primary {
    background: var(--nx-cta);
    color: var(--nx-on-cta);
}

.nx-btn--primary:hover {
    background: var(--nx-cta-hover);
    color: var(--nx-on-cta);
}

.nx-btn--accent {
    background: var(--nx-accent);
    color: var(--nx-navy-900);
}

.nx-btn--accent:hover {
    background: var(--nx-gold-400);
    color: var(--nx-navy-900);
}

/* Secondary uses a 1px ring rather than a border, so it does not shift layout. */
.nx-btn--secondary {
    background: transparent;
    color: var(--nx-ink);
    box-shadow: 0 0 0 1px var(--nx-line-strong);
}

.nx-btn--secondary:hover {
    background: var(--nx-bg-elev);
    color: var(--nx-ink);
}

.nx-btn--full {
    width: 100%;
}

.nx-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: stretch;
}

/* -- Inline link: underlined, offset, colour-shifts on hover -------------- */

.nx-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--nx-link);
    font-weight: 500;
    text-decoration-line: underline;
    text-decoration-color: currentColor;
    text-decoration-thickness: from-font;
    text-underline-offset: 0.2em;
    transition-property: color, text-decoration-color;
    transition-duration: var(--nx-dur);
    transition-timing-function: var(--nx-ease);
}

.nx-link:hover {
    color: var(--nx-link-hover);
    text-decoration-color: transparent;
}

.nx-link:focus-visible {
    outline: 3px solid var(--nx-ring);
    outline-offset: 3px;
}

.nx-link svg {
    width: 1em;
    height: 1em;
    flex: none;
}

/* ==========================================================================
   5. Surfaces — square by default (--nx-radius: 0)
   ========================================================================== */

.nx-card {
    background: var(--nx-bg-card);
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-radius);
    padding: 1.5rem;
    transition: border-color var(--nx-dur) var(--nx-ease),
                background-color var(--nx-dur) var(--nx-ease);
}

@media (min-width: 768px) {
    .nx-card { padding: 2rem; }
}

.nx-card--interactive:hover {
    border-color: var(--nx-line-strong);
}

.nx-card__icon {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--nx-radius);
    background: var(--nx-bg-elev);
    color: var(--nx-accent);
    margin-bottom: 1rem;
}

.nx-card__icon svg,
.nx-card__icon img {
    width: 22px;
    height: 22px;
}

.nx-card__body {
    color: var(--nx-ink-dim);
    font-size: clamp(15px, 1.35vw, 19px);
    line-height: var(--nx-lh-body);
    margin: 0.5rem 0 0;
}

/* ==========================================================================
   6. Grids
   ========================================================================== */

.nx-grid {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .nx-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nx-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nx-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .nx-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .nx-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ==========================================================================
   7. Hero — full-bleed image behind copy, inset as a rounded card
   ==========================================================================
   Reference structure: the hero is a photo that fills a rounded card inset by
   8px from the viewport, with three stacked gradient washes over it (top,
   bottom, left-radial) and the copy sitting on top. The card matches the
   floating header's radius so the two read as one system. */

.nx-hero {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

@media (min-width: 640px) {
    .nx-hero { padding: 8px; }
}

.nx-hero__card {
    position: relative;
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    /* Nav height + the 8px the bar is inset by. */
    padding-top: 67px;
    background: var(--nx-navy-900);
    color: #f4f7fa;
    overflow: hidden;
    isolation: isolate;
    min-height: 100svh;
}

@media (min-width: 640px) {
    .nx-hero__card {
        border-radius: 12px;
        min-height: 100%;
    }
}

@media (min-width: 768px) {
    .nx-hero__card {
        gap: 0;
        padding-top: 82px;
    }
}

/* -- Background layer ----------------------------------------------------- */

.nx-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 10;
    overflow: hidden;
}

@media (min-width: 640px) {
    .nx-hero__bg { border-radius: 12px; }
}

.nx-hero__bg img {
    position: relative;
    z-index: 10;
    height: 100%;
    width: 100%;
    object-fit: cover;
    color: transparent;
}

/* Three washes, composited in one paint. --nx-grad-rgb is the ink they fade
   from: black over a dark photo, white if the art is ever swapped for a light
   one. Percentages are the reference's own stops. */
.nx-hero__overlays {
    --nx-grad-rgb: 0, 0, 0;
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    background-image:
        linear-gradient(180deg,
            rgba(var(--nx-grad-rgb), 1) 0%,
            rgba(var(--nx-grad-rgb), 0.75) 4%,
            rgba(var(--nx-grad-rgb), 0.55) 7.5%,
            rgba(var(--nx-grad-rgb), 0.4) 10.5%,
            rgba(var(--nx-grad-rgb), 0.2) 14.5%,
            rgba(var(--nx-grad-rgb), 0.05) 18%,
            rgba(var(--nx-grad-rgb), 0) 20%),
        linear-gradient(0deg,
            rgba(var(--nx-grad-rgb), 1) 0%,
            rgba(var(--nx-grad-rgb), 0.75) 5%,
            rgba(var(--nx-grad-rgb), 0.55) 10%,
            rgba(var(--nx-grad-rgb), 0.4) 14%,
            rgba(var(--nx-grad-rgb), 0.2) 20%,
            rgba(var(--nx-grad-rgb), 0.05) 24%,
            rgba(var(--nx-grad-rgb), 0) 27%),
        radial-gradient(120% 100% at 2% 10%,
            rgba(var(--nx-grad-rgb), 0.8) 0%,
            rgba(var(--nx-grad-rgb), 0.6) 12%,
            rgba(var(--nx-grad-rgb), 0.4) 25%,
            rgba(var(--nx-grad-rgb), 0.2) 38%,
            rgba(var(--nx-grad-rgb), 0.1) 48%,
            rgba(var(--nx-grad-rgb), 0) 55%);
}

@media (min-width: 640px) {
    .nx-hero__overlays { border-radius: 12px; }
}

/* -- Copy block ----------------------------------------------------------- */

.nx-hero__copy {
    position: relative;
    z-index: 30;
    padding-top: 32px;
    pointer-events: none;
}

@media (min-width: 768px) {
    .nx-hero__copy { margin-block: auto; padding-top: 0; }
}

.nx-hero__grid {
    display: grid;
    row-gap: 16px;
}

@media (min-width: 768px) {
    .nx-hero__grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 24px;
    }
}

.nx-hero__headline {
    grid-column: span 7;
}

.nx-hero__headline .nx-h1 {
    max-width: 21ch;
    pointer-events: auto;
    color: #ffffff;
}

@media (min-width: 768px) {
    .nx-hero__headline .nx-h1 { padding-right: 24px; }
}

/* Sits on the row below the headline, left-aligned under it. */
.nx-hero__lede {
    grid-column: 1 / span 5;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
}

@media (min-width: 768px) {
    .nx-hero__lede { gap: 40px; }
}

.nx-hero__sub {
    max-width: 36ch;
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.4;
    font-weight: var(--nx-weight-heading);
    color: rgba(244, 247, 250, 0.78);
}

@media (min-width: 768px) {
    .nx-hero__sub { font-size: 1.5rem; }
}

.nx-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* The secondary action sits on the photograph, so it takes a light ring and
   light label rather than the page-level (dark-on-white) treatment. */
.nx-hero__actions .nx-btn--secondary {
    color: #ffffff;
    box-shadow: 0 0 0 1px rgba(244, 247, 250, 0.45);
}

.nx-hero__actions .nx-btn--secondary:hover {
    background: #ffffff;
    color: var(--nx-navy-900);
    box-shadow: 0 0 0 1px #ffffff;
}

/* Phone layout for the hero. On a phone the copy does not sit ON the
   photograph — the image becomes a band at the top of the card and the
   headline and buttons follow underneath it, on the card's own dark ground.
   Everything here is scoped below the 768px breakpoint, so the desktop hero
   is untouched. */
@media (max-width: 767px) {
    /* The grid is single-column here, but `span 7` on the headline and
       `1 / span 5` on the lede still generate seven implicit columns — leaving
       the lede's box five-sevenths wide and left-hugging, so anything centred
       inside it landed left of the true centre. Both revert to one column. */
    .nx-hero__headline,
    .nx-hero__lede {
        grid-column: auto;
    }

    /* The copy stays on the photograph, pushed down to sit against its lower
       edge rather than floating in the middle of the frame. */
    .nx-hero__copy {
        text-align: center;
        margin-top: auto;
        padding-top: 24px;
        padding-bottom: 40px;
    }

    /* The lede paragraph is dropped on phones: the headline alone carries the
       message and the screen is better spent on the image and the actions. */
    .nx-hero__sub { display: none; }

    .nx-hero__headline .nx-h1 {
        margin-inline: auto;
        font-size: 1.625rem;
        line-height: 1.25;
        max-width: 18ch;
    }

    .nx-hero__lede { align-items: center; gap: 20px; }

    /* The pair stays on one row but is centred as a group rather than stretched
       edge to edge, so it lines up with the headline above it. */
    .nx-hero__actions {
        flex-wrap: nowrap;
        width: auto;
        justify-content: center;
    }

    .nx-hero__actions .nx-btn {
        flex: 0 0 auto;
        min-width: 0;
        justify-content: center;
        gap: 0.5rem;
        padding-inline: 1.25rem;
    }
}

/* -- Bottom stat bar --------------------------------------------------- */

.nx-hero__foot {
    position: relative;
    z-index: 20;
    display: none;
}

@media (min-width: 768px) {
    .nx-hero__foot {
        display: block;
        padding-bottom: 48px;
    }
}

.nx-hero__foot-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    column-gap: 24px;
}

.nx-hero__stats {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    column-gap: 80px;
    row-gap: 24px;
    color: #ffffff;
}

@media (min-width: 768px) {
    .nx-hero__stats { column-gap: 96px; }
}

.nx-hero__stat {
    font-size: 0.875rem;
    line-height: 1.5;
    text-align: left;
}

@media (min-width: 768px) {
    .nx-hero__stat { font-size: 1rem; }
}

.nx-hero__stat strong { font-weight: 600; }

/* Stats repeat below the card on small screens, outside the image. */
.nx-hero__foot--mobile {
    display: block;
    margin: 24px 0 16px;
    position: static;
}

.nx-hero__foot--mobile .nx-hero__stats {
    justify-content: center;
    color: var(--nx-ink);
    column-gap: 80px;
}

.nx-hero__foot--mobile .nx-hero__stat { text-align: center; }

@media (min-width: 768px) {
    .nx-hero__foot--mobile { display: none; }
}

/* ==========================================================================
   9. USP cards — image over a rule-and-arrow footer
   ==========================================================================
   Reference structure: 16:9 art with a 12px radius, then a text block whose
   left edge is marked by a hairline rule and indented 48px, with a small
   square arrow button pinned to the right. Hovering the card zooms the art
   and inverts the arrow. */

.nx-usp__head {
    margin-bottom: 48px;
}

@media (min-width: 640px) { .nx-usp__head { margin-bottom: 56px; } }
@media (min-width: 768px) { .nx-usp__head { margin-bottom: 64px; } }

/* c-section-heading: regular weight, 1.75 -> 2.25 -> 3rem. */
.nx-usp__title {
    max-width: 32ch;
    margin: 0;
    color: var(--nx-ink);
    font-size: 1.75rem;
    font-weight: var(--nx-weight-heading);
    line-height: 1.2;
    text-wrap: balance;
}

@media (min-width: 640px) { .nx-usp__title { font-size: 2.25rem; } }
@media (min-width: 1024px) { .nx-usp__title { font-size: 3rem; } }

.nx-usp__grid {
    display: grid;
    column-gap: 24px;
    row-gap: 48px;
}

@media (min-width: 640px) {
    .nx-usp__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 56px;
    }
}

@media (min-width: 768px) {
    .nx-usp__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 64px;
    }
}

.nx-usp__card {
    display: block;
    text-decoration: none;
    color: inherit;
}

.nx-usp__card:hover,
.nx-usp__card:focus-visible { text-decoration: none; color: inherit; }

.nx-usp__card:focus-visible {
    outline: 3px solid var(--nx-ring);
    outline-offset: 4px;
}

.nx-usp__art {
    margin-bottom: 24px;
    overflow: hidden;
    border-radius: 12px;
    aspect-ratio: 16 / 9;
}

@media (min-width: 640px) { .nx-usp__art { margin-bottom: 32px; } }

.nx-usp__art img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 16px;
    display: block;
}

/* The zoom is desktop-only in the reference — on touch there is no hover to
   trigger it and the repaint is not worth it. */
@media (min-width: 768px) {
    .nx-usp__art img {
        transform: translateZ(0);
        transition: transform var(--nx-dur-slow) ease-out;
        will-change: transform;
    }

    .nx-usp__card:hover .nx-usp__art img { transform: scale(1.05); }
}

.nx-usp__body {
    position: relative;
    display: flex;
    justify-content: space-between;
    column-gap: 24px;
    border-left: 1px solid var(--nx-line);
    padding-left: 48px;
    padding-right: 24px;
}

.nx-usp__card-title {
    margin: 0 0 24px;
    font-size: 1.25rem;
    font-weight: var(--nx-weight-heading);
    line-height: 1.4;
    color: var(--nx-ink);
}

@media (min-width: 768px) { .nx-usp__card-title { font-size: 1.5rem; } }

.nx-usp__text {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--nx-ink-dim);
}

@media (min-width: 768px) { .nx-usp__text { font-size: 1.125rem; } }

.nx-usp__text strong { font-weight: 600; color: var(--nx-ink); }

/* c-square-button--regular: 2rem, 2.5rem from md, 6px radius. */
.nx-usp__arrow {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    width: 2rem;
    height: 2rem;
    border-radius: 0.375rem;
    border: 1px solid var(--nx-line-strong);
    background: var(--nx-bg-card);
    color: var(--nx-ink);
    transition-property: color, background-color, border-color;
    transition-duration: var(--nx-dur-btn);
    transition-timing-function: var(--nx-ease);
}

@media (min-width: 768px) {
    .nx-usp__arrow { width: 2.5rem; height: 2.5rem; }
}

.nx-usp__card:hover .nx-usp__arrow,
.nx-usp__card:focus-visible .nx-usp__arrow {
    border-color: var(--nx-navy-900);
    background: var(--nx-navy-900);
    color: #ffffff;
}

.nx-usp__arrow svg { width: 24px; height: 24px; }

/* ==========================================================================
   10. Split banner
   ========================================================================== */

.nx-banner {
    display: grid;
    gap: 2rem;
    align-items: center;
    padding: 2rem;
    border-radius: var(--nx-radius);
    background: var(--nx-navy-900);
    color: #f4f7fa;
    --nx-ink: #f4f7fa;
    --nx-ink-dim: #b2bec9;
    --nx-line: rgba(244, 247, 250, 0.12);
    overflow: hidden;
}

@media (min-width: 1024px) {
    .nx-banner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4rem;
        padding: 4rem;
    }
}

.nx-banner--soft {
    background: var(--nx-bg-elev);
    color: var(--nx-ink);
    --nx-ink: var(--nx-navy-900);
    --nx-ink-dim: #555e67;
    --nx-line: rgba(16, 20, 31, 0.12);
}

.nx-banner__art {
    display: grid;
    place-items: center;
    min-height: 200px;
}

.nx-banner__art svg { width: 100%; height: auto; max-width: 340px; }

@media (min-width: 1024px) {
    .nx-banner--reverse .nx-banner__art { order: -1; }
}

/* ==========================================================================
   11. Wealth panel — dark inset card over a photograph
   ==========================================================================
   Reference structure: a rounded dark panel sitting inside the medium
   container, with the artwork absolutely filling it at z-10 and all copy
   above at z-20. The two cards carry a left rule drawn with box-shadow
   rather than a border, so the rule sits 24px outside the card box and does
   not affect its width. */

.nx-wealth {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    isolation: isolate;
    padding: 40px 24px;
    color: #f4f7fa;
    background: var(--nx-navy-900);
    /* Scoped inversion: everything inside reads as dark-on-light reversed. */
    --nx-ink: #f4f7fa;
    --nx-ink-dim: #b2bec9;
    --nx-line: rgba(244, 247, 250, 0.18);
    --nx-line-strong: rgba(244, 247, 250, 0.3);
}

@media (min-width: 640px) { .nx-wealth { padding: 40px; } }
@media (min-width: 768px) { .nx-wealth { padding: 64px; } }

.nx-wealth__bg {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.nx-wealth__inner {
    position: relative;
    z-index: 20;
}

/* -- Split header --------------------------------------------------------- */

.nx-wealth__head {
    margin-bottom: 48px;
}

@media (min-width: 640px) { .nx-wealth__head { margin-bottom: 64px; } }

@media (min-width: 768px) {
    .nx-wealth__head {
        display: flex;
        column-gap: 24px;
    }

    .nx-wealth__head > * { width: 100%; }
}

/* main.css sets `h1..h6 { color: hsl(var(--heading)) }`, and an explicit
   colour on the element always beats an inherited one — so the panel's white
   has to be declared here rather than left to inherit from .nx-wealth. */
.nx-wealth__title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: var(--nx-weight-heading);
    line-height: 1.2;
    color: #ffffff;
    text-wrap: balance;
}

@media (min-width: 640px) { .nx-wealth__title { font-size: 1.875rem; } }
@media (min-width: 768px) { .nx-wealth__title { padding-right: 40px; } }
@media (min-width: 1024px) { .nx-wealth__title { font-size: 2.25rem; } }

.nx-wealth__desc {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 16px;
    padding-top: 12px;
    margin: 0;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--nx-ink-dim);
}

@media (min-width: 640px) { .nx-wealth__desc { row-gap: 24px; font-size: 1.25rem; } }
@media (min-width: 1024px) { .nx-wealth__desc { padding-top: 16px; } }

/* -- Cards ---------------------------------------------------------------- */

.nx-wealth__grid {
    display: grid;
    row-gap: 40px;
}

@media (min-width: 640px) {
    .nx-wealth__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 24px;
        row-gap: 48px;
    }
}

@media (min-width: 768px) {
    .nx-wealth__grid {
        margin-block: -24px;
        row-gap: 24px;
    }
}

.nx-wealth__card {
    display: block;
    padding-left: 24px;
    border-radius: 0.5rem;
    color: inherit;
    /* The rule is a shadow offset 25px left with -24px spread: a 1px line
       sitting 24px clear of the card, which a border could not do. */
    box-shadow: -1px 0 0 0 var(--nx-line);
    transition: box-shadow var(--nx-dur) cubic-bezier(0.87, 0, 0.13, 1);
}

@media (min-width: 640px) { .nx-wealth__card { padding-right: 24px; } }

@media (min-width: 768px) {
    .nx-wealth__card {
        padding: 24px 24px 24px 48px;
        box-shadow: -25px 0 0 -24px var(--nx-line);
    }
}

.nx-wealth__card-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.nx-wealth__icon {
    width: 48px;
    height: 48px;
    display: block;
    color: var(--nx-ink);
}

.nx-wealth__card-title {
    margin: 8px 0 0;
    font-size: 1.25rem;
    font-weight: var(--nx-weight-heading);
    line-height: 1.4;
    color: var(--nx-ink);
}

@media (min-width: 640px) { .nx-wealth__card-title { min-height: 68px; } }
@media (min-width: 768px) { .nx-wealth__card-title { font-size: 1.5rem; } }

.nx-wealth__text {
    margin: 24px 0 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--nx-ink-dim);
}

@media (min-width: 768px) { .nx-wealth__text { font-size: 1.125rem; } }

/* ==========================================================================
   12. Funding
   ========================================================================== */

.nx-funding__item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.nx-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.nx-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--nx-line);
    border-radius: var(--nx-radius);
    background: var(--nx-bg-card);
    font-size: clamp(14px, 1.1vw, 16px);
    color: var(--nx-ink-dim);
}

.nx-chip img { width: 18px; height: 18px; object-fit: contain; }

/* ==========================================================================
   13. Stats
   ========================================================================== */

.nx-stat {
    padding: 2rem;
    border-radius: var(--nx-radius);
    border: 1px solid var(--nx-line);
    background: var(--nx-bg-card);
}

.nx-stat__value {
    display: block;
    font-size: clamp(32px, 3.6vw, 48px);
    font-weight: var(--nx-weight-heading);
    line-height: 1.05;
    color: var(--nx-accent);
    font-variant-numeric: tabular-nums;
}

.nx-stat__title {
    display: block;
    margin-top: 0.75rem;
    font-size: clamp(18px, 1.5vw, 22px);
}

.nx-stat__desc {
    margin: 0.25rem 0 0;
    font-size: clamp(15px, 1.35vw, 19px);
    line-height: var(--nx-lh-body);
    color: var(--nx-ink-dim);
}

/* ==========================================================================
   14. Carousels
   ========================================================================== */

.nx-carousel { position: relative; }

.nx-carousel__rail {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 1rem;
    scrollbar-width: none;
}

.nx-carousel__rail::-webkit-scrollbar { display: none; }

.nx-carousel__item {
    flex: 0 0 clamp(280px, 80vw, 400px);
    scroll-snap-align: start;
}

.nx-carousel__nav {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.nx-carousel__btn {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: var(--nx-radius-pill);
    border: 0;
    box-shadow: 0 0 0 1px var(--nx-line-strong);
    background: transparent;
    color: var(--nx-ink);
    cursor: pointer;
    transition: background-color var(--nx-dur-btn) var(--nx-ease);
}

.nx-carousel__btn:hover:not(:disabled) { background: var(--nx-bg-elev); }
.nx-carousel__btn:disabled { opacity: 0.35; cursor: not-allowed; }

.nx-carousel__btn:focus-visible {
    outline: 3px solid var(--nx-ring);
    outline-offset: 2px;
}

.nx-carousel__btn svg { width: 20px; height: 20px; }

.nx-quote {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
}

.nx-quote__text {
    margin: 0;
    font-size: clamp(16px, 1.3vw, 20px);
    line-height: var(--nx-lh-body);
    color: var(--nx-ink);
}

.nx-quote__author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: auto;
}

.nx-quote__avatar {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 50%;
    background: var(--nx-navy-600);
    color: #fff;
    font-size: 0.875rem;
    object-fit: cover;
}

.nx-quote__name { display: block; font-size: clamp(14px, 1.3vw, 18px); font-weight: 500; }
.nx-quote__role { display: block; font-size: clamp(14px, 1.1vw, 16px); color: var(--nx-ink-mute); }

.nx-rating { display: inline-flex; gap: 2px; color: var(--nx-accent); }
.nx-rating svg { width: 16px; height: 16px; }

/* ==========================================================================
   15. Awards
   ========================================================================== */

.nx-awards {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.5rem 3rem;
}

.nx-award {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    text-align: center;
    min-width: 120px;
    color: var(--nx-ink-mute);
    text-decoration: none;
    filter: grayscale(1);
    opacity: 0.7;
    transition: filter var(--nx-dur) var(--nx-ease), opacity var(--nx-dur) var(--nx-ease);
}

.nx-award:hover {
    filter: grayscale(0);
    opacity: 1;
    color: var(--nx-ink-mute);
    text-decoration: none;
}

.nx-award img { height: 44px; width: auto; max-width: 140px; object-fit: contain; }
.nx-award__year { font-size: clamp(14px, 1.1vw, 16px); font-weight: 500; }
.nx-award__name { font-size: clamp(14px, 1.1vw, 16px); line-height: 1.4; max-width: 160px; }

/* ==========================================================================
   16. FAQ
   ========================================================================== */

.nx-faq {
    display: grid;
    max-width: var(--nx-maxw-small);
    margin-inline: auto;
}

.nx-faq__item {
    border-top: 1px solid var(--nx-line);
}

.nx-faq__item:last-child { border-bottom: 1px solid var(--nx-line); }

.nx-faq__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    min-height: 72px;
    padding: 1.25rem 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: clamp(18px, 1.7vw, 24px);
    font-weight: var(--nx-weight-heading);
    line-height: 1.35;
    text-align: start;
    color: var(--nx-ink);
    cursor: pointer;
    transition: color var(--nx-dur) var(--nx-ease);
}

.nx-faq__trigger:hover { color: var(--nx-link); }

.nx-faq__trigger:focus-visible {
    outline: 3px solid var(--nx-ring);
    outline-offset: -3px;
}

.nx-faq__icon {
    flex: none;
    width: 24px;
    height: 24px;
    color: var(--nx-ink-mute);
    transition: transform var(--nx-dur) var(--nx-ease);
}

.nx-faq__trigger[aria-expanded='true'] .nx-faq__icon { transform: rotate(180deg); }

/* Height animated via max-height set in JS — works with no build step. */
.nx-faq__panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--nx-dur-slow) var(--nx-ease);
}

.nx-faq__panel-inner {
    padding: 0 0 1.5rem;
    font-size: clamp(16px, 1.3vw, 20px);
    line-height: var(--nx-lh-body);
    color: var(--nx-ink-dim);
    max-width: 72ch;
}

/* ==========================================================================
   17. Final CTA + newsletter
   ========================================================================== */

/* Same treatment as the wealth panel: a rounded dark card inset in the
   container, artwork filling it at z-10, copy above at z-20. */
.nx-cta {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    isolation: isolate;
    padding: 40px 24px;
    text-align: center;
    color: #f4f7fa;
    background: var(--nx-navy-900);
    --nx-ink: #f4f7fa;
    --nx-ink-dim: #b2bec9;
    --nx-line: rgba(244, 247, 250, 0.18);
    --nx-line-strong: rgba(244, 247, 250, 0.3);
}

@media (min-width: 640px) { .nx-cta { padding: 40px; } }
@media (min-width: 768px) { .nx-cta { padding: 64px; } }

.nx-cta__bg {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.nx-cta__inner {
    position: relative;
    z-index: 20;
}

/* main.css sets `h1..h6 { color: hsl(var(--heading)) }`, and an explicit
   colour on the element beats an inherited one, so the white has to be
   declared rather than left to inherit from .nx-cta. */
.nx-cta .nx-display { color: #ffffff; }

.nx-cta .nx-lead { margin-inline: auto; margin-block: 1rem 2rem; }
.nx-cta .nx-btn-row { justify-content: center; }

.nx-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   18. Trust bar
   ========================================================================== */

/* ==========================================================================
   19. Scroll reveal
   ========================================================================== */

.nx-js .nx-reveal {
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity var(--nx-dur-slow) var(--nx-ease),
                transform var(--nx-dur-slow) var(--nx-ease);
}

.nx-js .nx-reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* ==========================================================================
   20. Small screens
   ========================================================================== */

@media (max-width: 480px) {
    /* Buttons stack and fill the row rather than each claiming 100% inside a
       non-wrapping flex line, which used to push the page into a sideways
       scroll wherever two buttons sat together. */
    .nx-btn-row .nx-btn { flex: 1 1 100%; }
        .nx-solution .nx-btn { align-self: stretch; }
    .nx-awards { gap: 1.5rem; }
    .nx-award { min-width: 96px; }
    .nx-award img { height: 34px; }
}

/* ==========================================================================
   21. Reduced motion + print
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .nx *,
    .nx *::before,
    .nx *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .nx-js .nx-reveal { opacity: 1; transform: none; }
    .nx-carousel__rail { scroll-behavior: auto; }
}

@media print {
    .nx-hero,
    .nx-cta,
        .nx-carousel__nav { display: none; }
}