/* nx-home.css — homepage styles, moved out of inline <style> blocks in
   pages/home/home.php (TKT-0008) so the 300 KB HTML shrinks and the rules are
   cached. Blocks are kept in their original source order. */

/* ---- from home.php lines 191-1803 ---- */
                /* =============================================================
                   Home page — scoped styles on the nx-* design system v2026
                   =============================================================
                   The entire homepage is built on tokens from
                   /assets/css/nexlla-2026.css. This block is layout +
                   choreography only — no hex codes that map to a token. */

                /* ─────────────────── Scroll progress bar ─────────────────── */
                .nx-scroll-progress {
                    position: fixed; top: 0; left: 0; right: 0;
                    height: 2px; z-index: 9999;
                    background: rgba(241,237,228,.04);
                    pointer-events: none;
                }
                .nx-scroll-progress__bar {
                    height: 100%; width: 0%;
                    background: linear-gradient(90deg, var(--nx-color-accent), var(--nx-color-accent-soft));
                    transition: width .12s linear;
                }

                /* ─────────────────── Reveal primitive ────────────────────── */
                .nx-reveal {
                    opacity: 0;
                    transform: translateY(24px);
                    transition:
                        opacity .9s var(--nx-ease-out),
                        transform .9s var(--nx-ease-out);
                    transition-delay: calc(var(--rdelay, 0) * 90ms);
                }
                .nx-reveal.is-in {
                    opacity: 1;
                    transform: translateY(0);
                }

                /* ─────────────────── Word-by-word fade ───────────────────── */
                [data-words] .word {
                    display: inline-block;
                    opacity: 0;
                    transform: translateY(8px);
                    animation: nxWordIn .55s var(--nx-ease-out) forwards;
                    animation-delay: calc(var(--i, 0) * 40ms);
                }
                @keyframes nxWordIn {
                    to { opacity: 1; transform: translateY(0); }
                }

                /* ─────────────────── Tilt + magnet primitives ────────────── */
                [data-nx-tilt] {
                    transition: transform .25s cubic-bezier(.18,.72,.18,1);
                    transform-style: preserve-3d;
                    will-change: transform;
                }
                [data-nx-magnet] {
                    transition: transform .25s cubic-bezier(.18,.72,.18,1);
                    will-change: transform;
                }
                /* Parallaxed elements get GPU-promoted so the rAF transform
                   updates do not paint the whole stacking context. */
                [data-nx-parallax] {
                    will-change: transform;
                    transform: translateZ(0);
                    backface-visibility: hidden;
                }

                /* ─────────────────── Marquee ─────────────────────────────── */
                .nx-marquee {
                    --nx-marquee-dur: 28s;
                    display: flex;
                    overflow: hidden;
                    width: 100%;
                    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
                            mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
                }
                .nx-marquee__track {
                    flex: 0 0 auto;
                    display: flex;
                    gap: 64px;
                    padding-right: 64px;
                    animation: nxMarqueeRun var(--nx-marquee-dur) linear infinite;
                }
                .nx-marquee.is-paused .nx-marquee__track { animation: none; }
                .nx-marquee__item {
                    font-family: var(--nx-font-mono);
                    font-size: 12px;
                    letter-spacing: .26em;
                    text-transform: uppercase;
                    color: var(--nx-color-text-muted);
                    white-space: nowrap;
                    display: inline-flex; align-items: center; gap: 18px;
                }
                .nx-marquee__item::after {
                    content:"·";
                    color: var(--nx-color-accent);
                    font-size: 14px;
                }
                @keyframes nxMarqueeRun {
                    to { transform: translate3d(-50%, 0, 0); }
                }

                /* ─────────────────── HERO ────────────────────────────────── */
                /* Page top + hero share one seamless black so the 16px strip
                   above the floating nav never shows a tonal seam. The hero
                   is pulled flush to the very top of the viewport. */
                html, body { background-color: #000; }
                .nx-hero {
                    position: relative;
                    width: 100%;
                    min-height: 100vh;
                    background: #000;
                    margin-top: 0;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    padding: 14vh clamp(20px, 5vw, 64px) 14vh;
                    box-sizing: border-box;
                    overflow: hidden;
                    isolation: isolate;
                }
                .nx-hero__canvas {
                    position: absolute; inset: 0;
                    width: 100%; height: 100%;
                    z-index: 0;
                    pointer-events: none;
                    display: block;
                }
                .nx-hero[data-hero-mode="webgl"] .hero-video__media,
                .nx-hero[data-hero-mode="webgl"] .nx-hero__video-fallback { display: none; }
                .nx-hero[data-hero-mode="video"] .nx-hero__canvas { display: none; }
                .nx-hero[data-hero-mode="video"] .hero-video__media,
                .nx-hero[data-hero-mode="video"] .nx-hero__video-fallback { display: block; }

                .hero-video__fallback {
                    position: absolute; inset: 0;
                    background: #000;
                    z-index: 0;
                    pointer-events: none;
                }
                .hero-video__media {
                    position: absolute; top: 0; left: 0;
                    width: 100%; height: 100%;
                    object-fit: cover;
                    z-index: 0;
                    pointer-events: none;
                    background: #000;
                }
                .hero-video__overlay {
                    position: absolute; inset: 0; z-index: 1;
                    background:
                        radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(0,0,0,0.38) 80%),
                        /* No darkening at the very top — was rgba(0,0,0,.12) which
                           created a flat dark band above the floating nav. Start
                           transparent so the ember reaches the top edge. */
                        linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 18%, rgba(0,0,0,.30) 60%, rgba(0,0,0,.55) 100%);
                }
                /* Warm ember wash anchored at the very top so the strip above
                   the nav reads as part of the hero, never a dark gap. A full-
                   width top band guarantees the whole top edge stays warm even
                   where the shader is dark. Sits above the shader (z:0), below
                   content (z:2). */
                .nx-hero::before {
                    content: ""; position: absolute; inset: 0; z-index: 1;
                    background:
                        linear-gradient(180deg, rgba(197, 205, 214,.20) 0%, rgba(197, 205, 214,.07) 9%, transparent 24%),
                        radial-gradient(140% 60% at 50% -10%, rgba(197, 205, 214,.20), transparent 60%);
                    pointer-events: none;
                }

                /* Bulletproof top-flush — nothing may offset the hero (or the
                   page) from the very top of the viewport. !important beats any
                   stray DSN-template margin/padding on the containers. */
                html, body { margin: 0 !important; padding: 0 !important; }
                #main_root, .main-root, #dsn-scrollbar { margin-top: 0 !important; padding-top: 0 !important; }
                .nx-hero { margin-top: 0 !important; }
                .nx-hero__canvas,
                .hero-video__media,
                .nx-hero__video-fallback,
                .hero-video__fallback { top: 0 !important; }

                /* HUD strip — top of hero, sits below the fixed nav */
                .nx-hero__hud {
                    position: absolute;
                    top: clamp(108px, 13vh, 150px);
                    left: clamp(20px, 5vw, 64px);
                    right: clamp(20px, 5vw, 64px);
                    z-index: 3;
                    display: flex; justify-content: space-between; align-items: center;
                    gap: 18px;
                    font-family: var(--nx-font-mono);
                    font-size: 10.5px;
                    letter-spacing: .26em;
                    text-transform: uppercase;
                    color: rgba(241,237,228,.62);
                    padding-bottom: 12px;
                    border-bottom: 1px solid rgba(241,237,228,.08);
                }
                .nx-hero__hud-left,
                .nx-hero__hud-right { display: inline-flex; align-items: center; gap: 12px; }
                .nx-hero__hud-dot {
                    width: 6px; height: 6px; border-radius: 50%;
                    background: var(--nx-color-accent);
                    box-shadow: 0 0 12px var(--nx-color-accent-glow);
                    animation: nxHudPulse 2.4s ease-in-out infinite;
                }
                @keyframes nxHudPulse {
                    0%, 100% { opacity: .6; transform: scale(.85); }
                    50%      { opacity: 1;  transform: scale(1.2); }
                }
                .nx-hero__hud::after {
                    content:""; position: absolute; left: 0; right: 0; bottom: -1px;
                    height: 1px;
                    background: linear-gradient(90deg, transparent, var(--nx-color-accent), transparent);
                    opacity: .35;
                }

                /* ── ASYMMETRIC HERO COMPOSITION ────────────────────────
                   Editorial-OS layout: left block holds the brand title +
                   lede + CTAs (60% column); right block is a vertical"studio is live" panel — clock, status ticker, featured
                   work, mini stats. Stacks vertically below 980px. */
                .nx-hero__content {
                    position: relative;
                    z-index: 2;
                    width: 100%;
                    max-width: var(--nx-w-wide);
                    margin: 0 auto;
                    display: grid;
                    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
                    gap: clamp(40px, 5vw, 88px);
                    align-items: end;
                }
                @media (max-width: 980px) {
                    .nx-hero__content { grid-template-columns: 1fr; gap: 36px; align-items: stretch; }
                }

                /* LEFT — editorial title block, left-aligned */
                .nx-hero__lead {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    text-align: left;
                    gap: 22px;
                }
                .nx-hero__lead > .nx-hero__lede { margin-top: 4px; max-width: 50ch; }
                .nx-hero__lead > .nx-hero__cta  { margin-top: 14px; justify-content: flex-start; }

                /* Editorial mast —"Nexlla — Issue 26 · …" above the title */
                .nx-hero__mast {
                    display: inline-flex; align-items: center; gap: 14px;
                    font-family: var(--nx-font-mono);
                    font-size: 10.5px;
                    letter-spacing: .28em;
                    text-transform: uppercase;
                    color: rgba(241,237,228,.55);
                    padding-bottom: 14px;
                    border-bottom: 1px solid rgba(241,237,228,.10);
                    width: 100%;
                    max-width: 28em;
                }
                .nx-hero__mast strong {
                    color: var(--nx-color-accent);
                    font-weight: 500;
                    letter-spacing: .26em;
                }
                .nx-hero__mast::after {
                    content:""; flex: 1; height: 1px;
                    background: linear-gradient(90deg, var(--nx-color-line-strong), transparent);
                    margin-left: 6px;
                }

                /* RIGHT — Live Studio Panel ─────────────────────────────── */
                .nx-hero__panel {
                    position: relative;
                    background: rgba(20, 17, 15, .55);
                    border: 1px solid var(--nx-color-line);
                    border-radius: var(--nx-radius-lg);
                    padding: 22px 22px 18px;
                    backdrop-filter: blur(14px);
                    -webkit-backdrop-filter: blur(14px);
                    box-shadow: 0 24px 60px -24px rgba(0,0,0,.65);
                    display: flex; flex-direction: column;
                    gap: 16px;
                    font-family: var(--nx-font-sans);
                    color: var(--nx-color-text);
                    overflow: hidden;
                    isolation: isolate;
                }
                .nx-hero__panel::before {
                    content:""; position: absolute; inset: 0;
                    background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(197, 205, 214,.12), transparent 70%);
                    pointer-events: none; z-index: -1;
                }
                .nx-hero__panel-head {
                    display: flex; align-items: center; gap: 10px;
                    font-family: var(--nx-font-mono);
                    font-size: 10.5px;
                    letter-spacing: .24em;
                    text-transform: uppercase;
                    color: var(--nx-color-text-muted);
                    padding-bottom: 12px;
                    border-bottom: 1px solid var(--nx-color-line);
                }
                .nx-hero__panel-head strong { color: var(--nx-color-text); font-weight: 500; }
                .nx-hero__panel-head .nx-dot {
                    width: 7px; height: 7px; border-radius: 50%;
                    background: var(--nx-color-accent);
                    box-shadow: 0 0 10px var(--nx-color-accent), 0 0 18px rgba(197, 205, 214,.5);
                    animation: nxHudPulse 2.2s ease-in-out infinite;
                    flex: 0 0 7px;
                }
                .nx-hero__panel-head .nx-clock {
                    margin-left: auto;
                    color: var(--nx-color-text);
                    font-feature-settings:"tnum" 1,"lnum" 1;
                }

                /* Ticker row — only the .is-active line is visible. The rest
                   sit on top of each other absolutely, fading in/out. */
                .nx-hero__panel .nx-ticker {
                    position: relative;
                    min-height: 22px;
                }
                .nx-hero__panel .nx-ticker__line {
                    position: absolute;
                    inset: 0;
                    font-family: var(--nx-font-sans);
                    font-size: 13px;
                    line-height: 1.5;
                    color: rgba(241,237,228,.92);
                    opacity: 0;
                    transform: translateY(6px);
                    transition: opacity .45s var(--nx-ease-out), transform .45s var(--nx-ease-out);
                    pointer-events: none;
                }
                .nx-hero__panel .nx-ticker__line.is-active {
                    opacity: 1;
                    transform: translateY(0);
                    pointer-events: auto;
                }
                .nx-hero__panel .nx-ticker__line strong { color: var(--nx-color-accent); font-weight: 500; }

                /* Featured-work mini card */
                .nx-hero__feat {
                    display: flex; align-items: center; gap: 14px;
                    padding: 12px;
                    background: rgba(241,237,228,.03);
                    border: 1px solid var(--nx-color-line);
                    border-radius: var(--nx-radius-md);
                    text-decoration: none;
                    color: inherit;
                    transition: border-color var(--nx-dur) var(--nx-ease-out), background var(--nx-dur) var(--nx-ease-out);
                }
                .nx-hero__feat:hover {
                    border-color: var(--nx-color-line-strong);
                    background: rgba(197, 205, 214,.05);
                }
                .nx-hero__feat .nx-img-ph {
                    flex: 0 0 88px; width: 88px; height: 66px; padding: 10px;
                }
                .nx-hero__feat .nx-img-ph--img { padding: 0; overflow: hidden; }
                .nx-hero__feat .nx-img-ph--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
                .nx-hero__feat .nx-img-ph__tag { font-size: 8px; letter-spacing: .18em; }
                .nx-hero__feat .nx-img-ph__hint { display: none; }
                .nx-hero__feat-body { flex: 1; min-width: 0; }
                .nx-hero__feat-row {
                    display: inline-flex; align-items: center; gap: 8px;
                    font-family: var(--nx-font-mono);
                    font-size: 10px;
                    letter-spacing: .18em;
                    text-transform: uppercase;
                    color: var(--nx-color-accent);
                    margin-bottom: 4px;
                }
                .nx-hero__feat-row::after {
                    content:""; width: 14px; height: 1px; background: var(--nx-color-accent); opacity: .5;
                }
                .nx-hero__feat-title {
                    font-family: var(--nx-font-display);
                    font-weight: 600;
                    font-size: 14.5px;
                    line-height: 1.25;
                    letter-spacing: -.012em;
                    margin: 0;
                    color: var(--nx-color-text);
                    overflow: hidden;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                }
                .nx-hero__feat-arrow {
                    flex: 0 0 auto;
                    color: var(--nx-color-text-muted);
                    transition: transform .25s var(--nx-ease-out), color .25s var(--nx-ease-out);
                }
                .nx-hero__feat:hover .nx-hero__feat-arrow {
                    transform: translateX(3px);
                    color: var(--nx-color-accent);
                }

                /* Mini stats inline strip */
                .nx-hero__stats {
                    display: flex; flex-wrap: wrap; gap: 14px 18px;
                    font-family: var(--nx-font-mono);
                    font-size: 10.5px;
                    letter-spacing: .18em;
                    text-transform: uppercase;
                    color: var(--nx-color-text-muted);
                    padding-top: 12px;
                    border-top: 1px solid var(--nx-color-line);
                }
                .nx-hero__stats span strong {
                    color: var(--nx-color-text);
                    font-weight: 500;
                    letter-spacing: 0;
                }

                .nx-hero__panel-cta {
                    display: inline-flex; align-items: center; gap: 8px;
                    font-family: var(--nx-font-sans);
                    font-size: 12.5px;
                    font-weight: 500;
                    color: var(--nx-color-accent);
                    text-decoration: none;
                    padding-top: 4px;
                    transition: gap .25s var(--nx-ease-out);
                }
                .nx-hero__panel-cta:hover { gap: 14px; }

                .nx-hero__eyebrow {
                    display: inline-flex; align-items: center; gap: 10px;
                    color: rgba(241,237,228,.92);
                    font-family: var(--nx-font-mono);
                    font-size: 12px;
                    font-weight: 500;
                    letter-spacing: .18em;
                    text-transform: uppercase;
                    padding: 8px 18px;
                    border: 1px solid rgba(241,237,228,.22);
                    border-radius: 999px;
                    backdrop-filter: blur(8px);
                    background: rgba(241,237,228,.04);
                    text-decoration: none;
                    transition: border-color .35s ease, background-color .35s ease, transform .35s ease, box-shadow .35s ease;
                }
                .nx-hero__eyebrow:hover {
                    border-color: rgba(241,237,228,.55);
                    background: rgba(241,237,228,.10);
                    transform: translateY(-1px);
                    box-shadow: 0 8px 24px rgba(0,0,0,.25);
                    color: rgba(241,237,228,.98);
                }
                .nx-hero__eyebrow-spark {
                    width: 8px; height: 8px; border-radius: 50%;
                    background: linear-gradient(135deg, #ff7a18, #ffb347);
                    box-shadow: 0 0 12px rgba(255,140,40,.85), 0 0 24px rgba(255,140,40,.45);
                    animation: nxSparkPulse 2.4s ease-in-out infinite;
                    flex: 0 0 8px;
                }
                @keyframes nxSparkPulse {
                    0%, 100% { transform: scale(1);   opacity: 1; }
                    50%      { transform: scale(1.4); opacity: .75; }
                }
                .nx-hero__eyebrow-arrow {
                    transition: transform .35s ease;
                    opacity: .85;
                }
                .nx-hero__eyebrow:hover .nx-hero__eyebrow-arrow {
                    transform: translateX(4px);
                    opacity: 1;
                }

                .nx-hero__title {
                    color: #fff;
                    font-family: var(--nx-font-display);
                    font-weight: 700;
                    /* Editorial left-aligned title — bigger now that it isn't competing
                       with the right-side panel for centre attention. */
                    font-size: clamp(2.6rem, 6.4vw, 5.6rem);
                    line-height: 0.98;
                    letter-spacing: -.038em;
                    margin: 0;
                    text-shadow: 0 2px 24px rgba(0,0,0,.55);
                    text-align: left;
                }
                .nx-hero__title em {
                    display: inline-block;
                    font-family: var(--nx-font-serif);
                    font-style: italic;
                    font-weight: 400;
                    color: var(--nx-color-accent);
                    letter-spacing: -.012em;
                    margin-top: 4px;
                    /* Plex Serif italic descends slightly differently from
                       Plex Sans — nudge optical alignment. */
                    line-height: 1;
                    padding-bottom: 0.04em;
                }

                .nx-hero__lede {
                    color: rgba(241,237,228,.88);
                    font-size: clamp(1rem, 1.4vw, 1.18rem);
                    line-height: 1.6;
                    margin: 0;
                    max-width: 60ch;
                    text-shadow: 0 1px 12px rgba(0,0,0,.35);
                }

                .nx-hero__cta {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                    gap: 14px;
                    margin-top: 12px;
                }

                .nx-btn {
                    display: inline-flex; align-items: center; justify-content: center;
                    gap: 8px;
                    padding: 10px 22px;
                    font-family: var(--nx-font-sans);
                    font-size: 13.5px;
                    font-weight: 600;
                    letter-spacing: .02em;
                    text-decoration: none;
                    border-radius: 999px;
                    line-height: 1;
                    min-height: 40px;
                    cursor: pointer;
                    border: 1px solid transparent;
                    transition:
                        background var(--nx-dur) var(--nx-ease-out),
                        color var(--nx-dur) var(--nx-ease-out),
                        border-color var(--nx-dur) var(--nx-ease-out),
                        transform var(--nx-dur) var(--nx-ease-out),
                        box-shadow var(--nx-dur) var(--nx-ease-out);
                }
                .nx-btn--primary {
                    background: var(--nx-silver-grad);
                    color: var(--nx-color-text-invert);
                    border-color: rgba(255,255,255,.5);
                    box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 8px 30px -10px rgba(255,255,255,.22);
                }
                .nx-btn--primary:hover {
                    color: var(--nx-color-text-invert);
                    transform: translateY(-1px);
                    box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 12px 36px -10px rgba(255,255,255,.30);
                }
                .nx-btn--ghost {
                    background: var(--nx-glass-bg);
                    -webkit-backdrop-filter: var(--nx-glass-blur); backdrop-filter: var(--nx-glass-blur);
                    color: var(--nx-color-text);
                    border-color: var(--nx-glass-border);
                }
                .nx-btn--ghost:hover {
                    background: var(--nx-glass-bg-strong);
                    border-color: var(--nx-color-text);
                }
                .nx-btn__arrow { transition: transform .3s var(--nx-ease-out); }
                .nx-btn:hover .nx-btn__arrow { transform: translateX(4px); }

                /* Hero bottom marquee + scroll affordance */
                .nx-hero__bottom {
                    position: absolute;
                    bottom: 4vh;
                    left: 0; right: 0;
                    z-index: 3;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: 18px;
                    padding: 0 clamp(20px, 5vw, 64px);
                }
                .nx-hero__bottom .nx-marquee {
                    width: 100%;
                    max-width: var(--nx-w-wide);
                }
                .nx-hero__scroll {
                    display: inline-flex; align-items: center; gap: 12px;
                    font-family: var(--nx-font-mono);
                    font-size: 10.5px;
                    letter-spacing: .26em;
                    text-transform: uppercase;
                    color: rgba(241,237,228,.55);
                    text-decoration: none;
                    transition: color .3s ease;
                }
                /* Scroll affordance — animated trickle.
                   A faint hairline rail with a bright accent segment that
                   continuously travels from top → bottom and fades out.
                   On hover, the cycle speeds up to invite the click. */
                .nx-hero__scroll-line {
                    position: relative;
                    width: 1px;
                    height: 56px;
                    background: rgba(241,237,228, .12);
                    overflow: hidden;
                    transition: height .4s var(--nx-ease-out);
                }
                .nx-hero__scroll-line::before {
                    content:"";
                    position: absolute;
                    left: 0; right: 0;
                    top: -55%;
                    height: 55%;
                    background: linear-gradient(180deg,
                        rgba(197, 205, 214, 0) 0%,
                        rgba(255, 179, 122, .9) 50%,
                        rgba(197, 205, 214, 0) 100%);
                    box-shadow: 0 0 8px rgba(197, 205, 214, .55);
                    animation: nxScrollTravel 1.9s cubic-bezier(.65,.05,.36,1) infinite;
                }
                @keyframes nxScrollTravel {
                    0%   { top: -55%; opacity: 0; }
                    15%  { opacity: 1; }
                    85%  { opacity: 1; }
                    100% { top: 100%;  opacity: 0; }
                }
                .nx-hero__scroll:hover { color: var(--nx-color-text); }
                .nx-hero__scroll:hover .nx-hero__scroll-line { height: 72px; }
                .nx-hero__scroll:hover .nx-hero__scroll-line::before { animation-duration: 1.1s; }
                @media (prefers-reduced-motion: reduce) {
                    .nx-hero__scroll-line::before { animation: none; top: 20%; opacity: .6; }
                }

                /* Corner HUD chips */
                .nx-hero__chip {
                    position: absolute;
                    z-index: 3;
                    font-family: var(--nx-font-mono);
                    font-size: 10px;
                    letter-spacing: .24em;
                    text-transform: uppercase;
                    color: rgba(241,237,228,.42);
                    padding: 7px 12px;
                    border: 1px solid rgba(241,237,228,.10);
                    border-radius: var(--nx-radius-md);
                    background: rgba(0,0,0,.32);
                    backdrop-filter: blur(6px);
                    display: inline-flex; align-items: center; gap: 8px;
                    line-height: 1;
                }
                .nx-hero__chip--tl { top: clamp(160px, 20vh, 220px); left: clamp(20px, 5vw, 64px); }
                .nx-hero__chip--tr { top: clamp(160px, 20vh, 220px); right: clamp(20px, 5vw, 64px); }
                .nx-hero__chip--bl { bottom: clamp(150px, 20vh, 220px); left: clamp(20px, 5vw, 64px); }
                .nx-hero__chip--br { bottom: clamp(150px, 20vh, 220px); right: clamp(20px, 5vw, 64px); }
                @media (max-width: 1100px) {
                    .nx-hero__chip { display: none; }
                    .nx-hero__hud { display: none; }
                }

                /* ─────────────────── Section common ──────────────────────── */
                .nx-section {
                    position: relative;
                    padding-block: clamp(80px, 11vw, 144px);
                    padding-inline: clamp(20px, 5vw, 64px);
                    isolation: isolate;
                }
                .nx-section__inner { max-width: var(--nx-w-wide); margin-inline: auto; }
                .nx-section__head  {
                    display: flex; flex-direction: column; align-items: center; gap: 18px;
                    text-align: center; max-width: var(--nx-w-prose);
                    margin: 0 auto clamp(48px, 7vw, 96px);
                }
                .nx-section__head--left {
                    align-items: flex-start; text-align: left; margin-inline: 0;
                }
                .nx-eyebrow {
                    display: inline-flex; align-items: center; gap: 12px;
                    font-family: var(--nx-font-mono);
                    font-size: 11px;
                    letter-spacing: .22em;
                    text-transform: uppercase;
                    color: var(--nx-color-text-muted);
                    margin: 0;
                }
                .nx-eyebrow::before {
                    content:""; width: 32px; height: 1px;
                    background: linear-gradient(90deg, transparent, var(--nx-color-accent), transparent);
                }
                .nx-eyebrow--center::after {
                    content:""; width: 32px; height: 1px;
                    background: linear-gradient(90deg, transparent, var(--nx-color-accent), transparent);
                }
                .nx-section__title {
                    font-family: var(--nx-font-display);
                    font-weight: 700;
                    font-size: clamp(2rem, 4.5vw, 3.6rem);
                    line-height: 1.05;
                    letter-spacing: -.028em;
                    margin: 0;
                    max-width: 22ch;
                }
                .nx-section__title em {
                    font-family: var(--nx-font-serif);
                    font-style: italic;
                    font-weight: 400;
                    color: var(--nx-color-accent);
                    letter-spacing: -.005em;
                }
                .nx-section__lede {
                    color: var(--nx-color-text-muted);
                    font-size: clamp(1rem, 1.4vw, 1.18rem);
                    line-height: 1.65;
                    margin: 0;
                    max-width: 60ch;
                }
                .nx-section__lede strong { color: var(--nx-color-text); font-weight: 500; }

                /* ─────────────────── 02 — KPI ROW ────────────────────────── */
                .nx-kpi {
                    border-top: 1px solid var(--nx-color-line);
                    border-bottom: 1px solid var(--nx-color-line);
                    background:
                        radial-gradient(ellipse 60% 50% at 50% 0%, rgba(197, 205, 214,.05), transparent 70%),
                        linear-gradient(180deg, transparent 0%, rgba(197, 205, 214,.02) 50%, transparent 100%);
                }
                .nx-kpi__grid {
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                    gap: 20px;
                }
                @media (max-width: 1100px) { .nx-kpi__grid { grid-template-columns: repeat(2, 1fr); } }
                @media (max-width: 600px)  { .nx-kpi__grid { grid-template-columns: 1fr; } }

                .nx-kpi__card {
                    position: relative;
                    background: var(--nx-color-surface);
                    border: 1px solid var(--nx-color-line);
                    border-radius: var(--nx-radius-lg);
                    padding: 28px 28px 24px;
                    display: grid;
                    /* eyebrow · number · chart · caption — fixed rhythm */
                    grid-template-rows: auto auto 1fr auto;
                    row-gap: 18px;
                    min-height: 320px;
                    overflow: hidden;
                    isolation: isolate;
                    transition: border-color var(--nx-dur) var(--nx-ease-out), background var(--nx-dur) var(--nx-ease-out), transform var(--nx-dur) var(--nx-ease-out);
                }
                .nx-kpi__card::before {
                    content:""; position: absolute; inset: 0;
                    background: radial-gradient(ellipse 60% 60% at var(--nx-shine-x, 50%) var(--nx-shine-y, 50%), rgba(255,179,122,.10), transparent 60%);
                    opacity: 0; transition: opacity var(--nx-dur) var(--nx-ease-out);
                    pointer-events: none;
                }
                .nx-kpi__card:hover {
                    border-color: var(--nx-color-line-strong);
                    background: var(--nx-color-surface-2);
                }
                .nx-kpi__card:hover::before { opacity: 1; }

                .nx-kpi__eyebrow {
                    font-family: var(--nx-font-mono);
                    font-size: 10.5px;
                    letter-spacing: .26em;
                    text-transform: uppercase;
                    color: var(--nx-color-accent);
                    display: inline-flex; align-items: center; gap: 10px;
                }
                .nx-kpi__eyebrow::before {
                    content:""; width: 18px; height: 1px;
                    background: var(--nx-color-accent);
                    opacity: .6;
                }
                .nx-kpi__value {
                    font-family: var(--nx-font-display);
                    font-weight: 700;
                    font-size: clamp(2.8rem, 4.6vw, 4.8rem);
                    line-height: 0.94;
                    letter-spacing: -.045em;
                    color: var(--nx-color-text);
                    font-feature-settings:"tnum" 1,"lnum" 1;
                    /* avoid the 100+"+" wrapping mid-vertical */
                    display: inline-block;
                }
                .nx-kpi__fx {
                    width: 100%;
                    height: 88px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                .nx-kpi__fx svg { width: 100%; height: 100%; }
                /* Donut + orbit are roughly square — center & cap height */
                .nx-kpi__fx--donut { height: 132px; }
                .nx-kpi__fx--donut svg { width: auto; max-height: 100%; }
                .nx-kpi__fx--orbit { height: 132px; }
                .nx-kpi__fx--orbit svg { width: auto; max-height: 100%; }

                .nx-kpi__caption {
                    font-size: 13.5px;
                    color: var(--nx-color-text-muted);
                    line-height: 1.5;
                    margin: 0;
                    padding-top: 18px;
                    border-top: 1px solid var(--nx-color-line);
                    font-family: var(--nx-font-sans);
                }

                /* ─────────────────── 03 — DISCIPLINES ────────────────────── */
                .nx-disc__grid {
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                    gap: 24px;
                }
                @media (max-width: 1080px) { .nx-disc__grid { grid-template-columns: repeat(2, 1fr); } }
                @media (max-width: 640px)  { .nx-disc__grid { grid-template-columns: 1fr; } }

                .nx-disc__tile {
                    position: relative;
                    display: flex; flex-direction: column;
                    background: var(--nx-color-surface);
                    border: 1px solid var(--nx-color-line);
                    border-radius: var(--nx-radius-lg);
                    overflow: hidden;
                    text-decoration: none;
                    color: inherit;
                    transition:
                        border-color var(--nx-dur) var(--nx-ease-out),
                        transform var(--nx-dur) var(--nx-ease-out),
                        background var(--nx-dur) var(--nx-ease-out);
                    isolation: isolate;
                }
                .nx-disc__tile:hover {
                    border-color: var(--nx-color-accent-soft);
                    transform: translateY(-4px);
                    background: var(--nx-color-surface-2);
                }
                .nx-disc__canvas-wrap {
                    position: relative;
                    width: 100%;
                    height: 240px;
                    background: #0a0907;
                    overflow: hidden;
                }
                .nx-disc__tile canvas[data-service-shader] {
                    position: absolute; inset: 0;
                    width: 100%; height: 100%;
                    display: block;
                }
                .nx-disc__body {
                    padding: 28px;
                    display: flex; flex-direction: column;
                    gap: 12px;
                    flex: 1;
                }
                .nx-disc__num {
                    font-family: var(--nx-font-mono);
                    font-size: 11px;
                    letter-spacing: .22em;
                    text-transform: uppercase;
                    color: var(--nx-color-accent);
                }
                .nx-disc__title {
                    font-family: var(--nx-font-display);
                    font-weight: 600;
                    font-size: var(--nx-text-2xl);
                    line-height: 1.1;
                    letter-spacing: -.02em;
                    margin: 0;
                    color: var(--nx-color-text);
                }
                .nx-disc__body p {
                    color: var(--nx-color-text-muted);
                    line-height: 1.6;
                    font-size: var(--nx-text-sm);
                    margin: 0;
                }
                .nx-disc__link {
                    display: inline-flex; align-items: center; gap: 8px;
                    margin-top: auto; padding-top: 16px;
                    font-family: var(--nx-font-mono);
                    font-size: 11px;
                    letter-spacing: .22em;
                    text-transform: uppercase;
                    color: var(--nx-color-accent);
                    transition: gap var(--nx-dur) var(--nx-ease-out);
                }
                .nx-disc__tile:hover .nx-disc__link { gap: 14px; }
                .nx-disc__foot {
                    text-align: center;
                    margin-top: clamp(40px, 6vw, 64px);
                }
                .nx-disc__foot a {
                    font-family: var(--nx-font-mono);
                    font-size: 12px;
                    letter-spacing: .22em;
                    text-transform: uppercase;
                    color: var(--nx-color-text);
                    text-decoration: none;
                    padding: 12px 24px;
                    border: 1px solid var(--nx-color-line-strong);
                    border-radius: 999px;
                    display: inline-flex; align-items: center; gap: 10px;
                    transition: border-color var(--nx-dur) var(--nx-ease-out), background var(--nx-dur) var(--nx-ease-out);
                }
                .nx-disc__foot a:hover {
                    border-color: var(--nx-color-accent);
                    background: rgba(197, 205, 214,.06);
                }

                /* ─────────────────── 04 — PIPELINE ────────────────────────── */
                .nx-pipeline-section {
                    border-top: 1px solid var(--nx-color-line);
                    border-bottom: 1px solid var(--nx-color-line);
                    background: linear-gradient(180deg, transparent, rgba(197, 205, 214,.02) 50%, transparent);
                }
                .nx-pipeline {
                    position: relative;
                    width: 100%;
                }
                .nx-pipeline__rail {
                    position: relative;
                    height: 2px;
                    width: 100%;
                    background: var(--nx-color-line);
                    margin-bottom: 60px;
                    border-radius: 2px;
                }
                .nx-pipeline__fill {
                    position: absolute; top: 0; left: 0;
                    height: 100%;
                    width: calc(var(--progress, 0) * 100%);
                    background: linear-gradient(90deg, var(--nx-color-accent), var(--nx-color-accent-soft));
                    border-radius: 2px;
                    transition: width .25s linear;
                }
                .nx-pipeline__node {
                    position: absolute;
                    top: 50%;
                    width: 14px; height: 14px;
                    margin-left: -7px; margin-top: -7px;
                    border-radius: 50%;
                    background: var(--nx-color-bg);
                    border: 2px solid var(--nx-color-line-strong);
                    transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
                }
                .nx-pipeline__node.is-on {
                    border-color: var(--nx-color-accent);
                    box-shadow: 0 0 0 6px rgba(197, 205, 214,.12);
                    transform: scale(1.1);
                }
                .nx-pipeline__node:nth-child(2) { left: 12.5%; }
                .nx-pipeline__node:nth-child(3) { left: 37.5%; }
                .nx-pipeline__node:nth-child(4) { left: 62.5%; }
                .nx-pipeline__node:nth-child(5) { left: 87.5%; }

                .nx-pipeline__stages {
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                    gap: 24px;
                }
                @media (max-width: 1080px) { .nx-pipeline__stages { grid-template-columns: repeat(2, 1fr); } }
                @media (max-width: 600px)  { .nx-pipeline__stages { grid-template-columns: 1fr; } }

                .nx-pipeline__stage {
                    position: relative;
                    background: var(--nx-color-surface);
                    border: 1px solid var(--nx-color-line);
                    border-radius: var(--nx-radius-lg);
                    padding: 28px;
                    display: flex; flex-direction: column; gap: 16px;
                    transition: border-color var(--nx-dur) var(--nx-ease-out), background var(--nx-dur) var(--nx-ease-out);
                }
                .nx-pipeline__stage.is-active {
                    border-color: var(--nx-color-accent);
                    background: var(--nx-color-surface-2);
                    box-shadow: 0 0 0 1px rgba(197, 205, 214,.18), 0 24px 48px -16px rgba(0,0,0,.55);
                }
                .nx-pipeline__week {
                    font-family: var(--nx-font-mono);
                    font-size: 11px;
                    letter-spacing: .22em;
                    text-transform: uppercase;
                    color: var(--nx-color-text-muted);
                }
                .nx-pipeline__numeral {
                    font-family: var(--nx-font-display);
                    font-weight: 700;
                    font-size: clamp(3rem, 5.5vw, 5.5rem);
                    line-height: 0.92;
                    letter-spacing: -.04em;
                    -webkit-text-stroke: 1px var(--nx-color-line-strong);
                    -webkit-text-fill-color: transparent;
                    color: transparent;
                    transition: -webkit-text-fill-color var(--nx-dur) var(--nx-ease-out), -webkit-text-stroke-color var(--nx-dur) var(--nx-ease-out);
                }
                .nx-pipeline__stage.is-active .nx-pipeline__numeral {
                    -webkit-text-fill-color: var(--nx-color-accent);
                    -webkit-text-stroke-color: var(--nx-color-accent);
                }
                .nx-pipeline__stage-title {
                    font-family: var(--nx-font-display);
                    font-weight: 600;
                    font-size: var(--nx-text-xl);
                    letter-spacing: -.02em;
                    color: var(--nx-color-text);
                    margin: 0;
                }
                .nx-pipeline__stage-body {
                    color: var(--nx-color-text-muted);
                    line-height: 1.55;
                    font-size: var(--nx-text-sm);
                    margin: 0;
                }
                .nx-pipeline__bullets {
                    list-style: none; padding: 0; margin: 0;
                    display: flex; flex-direction: column; gap: 6px;
                    border-top: 1px solid var(--nx-color-line);
                    padding-top: 14px;
                }
                .nx-pipeline__bullets li {
                    display: flex; align-items: center; gap: 10px;
                    font-family: var(--nx-font-mono);
                    font-size: 10.5px;
                    letter-spacing: .14em;
                    text-transform: uppercase;
                    color: var(--nx-color-text-muted);
                }
                .nx-pipeline__bullets li::before {
                    content:""; width: 5px; height: 5px;
                    background: var(--nx-color-accent);
                    border-radius: 50%;
                    flex: 0 0 5px;
                    opacity: .6;
                }
                .nx-pipeline__foot {
                    text-align: center;
                    margin-top: clamp(40px, 6vw, 64px);
                    font-family: var(--nx-font-mono);
                    font-size: 11px;
                    letter-spacing: .22em;
                    text-transform: uppercase;
                    color: var(--nx-color-text-muted);
                }

                /* ─────────────────── 05 — SELECTED WORK ───────────────────── */
                .nx-work__grid {
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                    gap: 24px;
                    align-items: start;
                }
                @media (max-width: 1080px) { .nx-work__grid { grid-template-columns: repeat(2, 1fr); } }
                @media (max-width: 640px)  { .nx-work__grid { grid-template-columns: 1fr; } }

                .nx-work__card {
                    background: var(--nx-color-surface);
                    border: 1px solid var(--nx-color-line);
                    border-radius: var(--nx-radius-lg);
                    overflow: hidden;
                    display: flex; flex-direction: column;
                    text-decoration: none; color: inherit;
                    transition: border-color var(--nx-dur) var(--nx-ease-out), transform var(--nx-dur) var(--nx-ease-out), background var(--nx-dur) var(--nx-ease-out);
                }
                .nx-work__card:hover {
                    border-color: var(--nx-color-accent-soft);
                    transform: translateY(-4px);
                    background: var(--nx-color-surface-2);
                }
                .nx-work__card .nx-img-ph {
                    border-radius: 0;
                    border-left: 0; border-right: 0; border-top: 0;
                    border-bottom: 1px dashed var(--nx-color-line-strong);
                }
                /* real project image */
                .nx-work__media {
                    margin: 0; aspect-ratio: 4 / 3; overflow: hidden;
                    border-bottom: 1px solid var(--nx-color-line); background: var(--nx-color-surface-2);
                }
                .nx-work__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .55s var(--nx-ease-out); }
                .nx-work__card:hover .nx-work__media img { transform: scale(1.05); }
                .nx-work__title {
                    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
                    min-height: 2.3em; margin-top: 2px;
                }
                .nx-work__summary {
                    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
                }
                .nx-work__body {
                    padding: 16px 22px 22px;
                    display: flex; flex-direction: column; gap: 8px;
                }
                .nx-work__meta { margin: 0; gap: 10px; }
                .nx-work__meta {
                    display: flex; align-items: center; justify-content: space-between;
                    font-family: var(--nx-font-mono);
                    font-size: 11px;
                    letter-spacing: .22em;
                    text-transform: uppercase;
                    color: var(--nx-color-text-muted);
                }
                .nx-work__meta .cat { color: var(--nx-color-accent); }
                .nx-work__title {
                    font-family: var(--nx-font-display);
                    font-weight: 600;
                    font-size: var(--nx-text-xl);
                    line-height: 1.15;
                    letter-spacing: -.02em;
                    color: var(--nx-color-text);
                    margin: 0;
                }
                .nx-work__summary {
                    color: var(--nx-color-text-muted);
                    line-height: 1.55;
                    font-size: var(--nx-text-sm);
                    margin: 0;
                }
                .nx-work__kpi {
                    margin-top: 10px;
                    padding-top: 14px;
                    border-top: 1px solid var(--nx-color-line);
                    font-family: var(--nx-font-mono);
                    font-size: 11px;
                    letter-spacing: .14em;
                    text-transform: uppercase;
                    color: var(--nx-color-accent);
                }
                .nx-work__foot { text-align: center; margin-top: clamp(40px, 6vw, 64px); }

                /* ─────────────────── 06 — NELLO ───────────────────────────── */
                .nx-nello-section {
                    position: relative;
                    background:
                        radial-gradient(ellipse 70% 50% at 50% 100%, rgba(197, 205, 214,.08), transparent 60%);
                    border-top: 1px solid var(--nx-color-line);
                    border-bottom: 1px solid var(--nx-color-line);
                }
                .nx-nello__info {
                    display: flex;
                    flex-direction: column;
                    gap: clamp(40px, 6vw, 64px);
                }
                .nx-nello__flow-label {
                    text-align: center;
                    font-family: var(--nx-font-mono);
                    font-size: 11px;
                    letter-spacing: .22em;
                    text-transform: uppercase;
                    color: var(--nx-color-text-muted);
                    margin: 0;
                }

                /* ── Request flow: 5 connected steps with an animated pulse ── */
                .nx-nello__steps {
                    list-style: none; margin: 0; padding: 0;
                    position: relative;
                    display: grid;
                    grid-template-columns: repeat(5, 1fr);
                    gap: 16px;
                }
                .nx-nello__steps::before,
                .nx-nello__steps::after {
                    content: ""; position: absolute;
                    top: 30px; left: 10%; right: 10%; height: 2px;
                    z-index: 0; pointer-events: none;
                }
                .nx-nello__steps::before {
                    background: linear-gradient(90deg, transparent, var(--nx-color-line) 7%, var(--nx-color-line) 93%, transparent);
                }
                .nx-nello__steps::after {
                    height: 3px; top: 29.5px;
                    background: linear-gradient(90deg, transparent, var(--nx-color-accent), transparent);
                    background-size: 22% 100%; background-repeat: no-repeat;
                    filter: drop-shadow(0 0 6px var(--nx-color-accent-glow, rgba(226,90,28,.55)));
                    animation: nxNelloFlow 3.4s linear infinite;
                }
                @keyframes nxNelloFlow {
                    from { background-position: -22% 0; }
                    to   { background-position: 122% 0; }
                }
                .nx-nello__step {
                    position: relative; z-index: 1;
                    display: flex; flex-direction: column; align-items: center;
                    text-align: center; gap: 12px;
                }
                .nx-nello__step-badge {
                    position: relative;
                    width: 60px; height: 60px;
                    display: grid; place-items: center;
                    border-radius: 50%;
                    color: var(--nx-color-accent);
                    background:
                        radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--nx-color-accent) 18%, transparent), transparent 70%),
                        var(--nx-color-bg, #0a0b10);
                    border: 1px solid color-mix(in srgb, var(--nx-color-accent) 42%, var(--nx-color-line));
                    box-shadow: 0 10px 30px rgba(0,0,0,.4);
                    transition: transform .35s var(--nx-ease-out), box-shadow .35s var(--nx-ease-out);
                }
                .nx-nello__step-badge svg { width: 24px; height: 24px; }
                .nx-nello__step:hover .nx-nello__step-badge {
                    transform: translateY(-4px);
                    box-shadow: 0 0 24px var(--nx-color-accent-glow, rgba(226,90,28,.4)), 0 14px 34px rgba(0,0,0,.5);
                }
                .nx-nello__step-num {
                    position: absolute; top: -8px; right: -8px;
                    width: 22px; height: 22px;
                    display: grid; place-items: center;
                    border-radius: 50%;
                    font-family: var(--nx-font-mono); font-size: 10px; font-weight: 600;
                    color: var(--nx-color-bg, #0a0b10);
                    background: var(--nx-color-accent);
                }
                .nx-nello__step-title {
                    margin: 0; font-size: 1rem; font-weight: 600;
                    color: var(--nx-color-text);
                }
                .nx-nello__step-desc {
                    margin: 0; max-width: 22ch;
                    font-size: var(--nx-text-sm, .85rem); line-height: 1.5;
                    color: var(--nx-color-text-muted);
                }
                @media (max-width: 860px) {
                    .nx-nello__steps { grid-template-columns: 1fr; gap: 22px; }
                    .nx-nello__steps::before {
                        top: 30px; bottom: 30px; left: 30px; right: auto;
                        width: 2px; height: auto;
                        background: linear-gradient(180deg, transparent, var(--nx-color-line) 7%, var(--nx-color-line) 93%, transparent);
                    }
                    .nx-nello__steps::after {
                        top: 30px; bottom: 30px; left: 29.5px; right: auto;
                        width: 3px; height: auto;
                        background: linear-gradient(180deg, transparent, var(--nx-color-accent), transparent);
                        background-size: 100% 22%; background-repeat: no-repeat;
                        animation: nxNelloFlowV 3.4s linear infinite;
                    }
                    .nx-nello__step {
                        flex-direction: row; align-items: center; text-align: left; gap: 16px;
                    }
                    .nx-nello__step-badge { flex: 0 0 60px; }
                    .nx-nello__step-desc { max-width: none; }
                }
                @keyframes nxNelloFlowV {
                    from { background-position: 0 -22%; }
                    to   { background-position: 0 122%; }
                }

                /* ── Feature cards ── */
                .nx-nello__features {
                    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
                }
                @media (max-width: 760px) { .nx-nello__features { grid-template-columns: 1fr; } }
                .nx-nello__feature {
                    padding: clamp(20px, 3vw, 28px);
                    border: 1px solid var(--nx-color-line);
                    border-radius: var(--nx-radius-lg, 16px);
                    background: var(--nx-color-surface, rgba(255,255,255,.02));
                    display: flex; flex-direction: column; gap: 10px;
                    transition: border-color .3s var(--nx-ease-out), transform .3s var(--nx-ease-out);
                }
                .nx-nello__feature:hover {
                    border-color: color-mix(in srgb, var(--nx-color-accent) 45%, var(--nx-color-line));
                    transform: translateY(-4px);
                }
                .nx-nello__feature-ico {
                    width: 44px; height: 44px;
                    display: grid; place-items: center;
                    border-radius: 12px;
                    color: var(--nx-color-accent);
                    background: color-mix(in srgb, var(--nx-color-accent) 12%, transparent);
                    border: 1px solid color-mix(in srgb, var(--nx-color-accent) 30%, var(--nx-color-line));
                }
                .nx-nello__feature-ico svg { width: 22px; height: 22px; }
                .nx-nello__feature-title { margin: 0; font-size: 1.05rem; font-weight: 600; color: var(--nx-color-text); }
                .nx-nello__feature-desc { margin: 0; font-size: var(--nx-text-sm, .85rem); line-height: 1.55; color: var(--nx-color-text-muted); }
                .nx-nello__langs {
                    list-style: none; margin: 6px 0 0; padding: 0;
                    display: flex; flex-wrap: wrap; gap: 6px;
                }
                .nx-nello__langs li {
                    font-family: var(--nx-font-mono); font-size: 10px; letter-spacing: .1em;
                    padding: 4px 9px; border-radius: 999px;
                    border: 1px solid var(--nx-color-line);
                    color: var(--nx-color-text-muted);
                    background: var(--nx-color-bg, rgba(0,0,0,.25));
                }
                .nx-nello__cta { margin-top: 4px; text-align: center; }
                @media (prefers-reduced-motion: reduce) {
                    .nx-nello__steps::after { animation: none; opacity: .55; background-position: 50% 0; }
                }

                /* ─────────────────── 07 — VOICES ──────────────────────────── */
                .nx-voices {
                    text-align: center;
                }
                .nx-voices__quotes {
                    position: relative;
                    max-width: 70ch;
                    margin: 0 auto;
                    min-height: 280px;
                }
                .nx-q {
                    position: absolute;
                    inset: 0;
                    opacity: 0;
                    transform: translateY(8px);
                    transition: opacity .55s var(--nx-ease-out), transform .55s var(--nx-ease-out);
                    pointer-events: none;
                    display: flex; flex-direction: column; align-items: center; gap: 24px;
                    margin: 0;
                }
                .nx-q.is-active {
                    opacity: 1; transform: translateY(0);
                    pointer-events: auto;
                }
                .nx-q__text {
                    font-family: var(--nx-font-serif);
                    font-style: italic;
                    font-weight: 400;
                    font-size: clamp(1.4rem, 2.4vw, 2rem);
                    line-height: 1.4;
                    color: var(--nx-color-text);
                    margin: 0;
                    letter-spacing: -.005em;
                }
                .nx-q__text::before { content:"“"; color: var(--nx-color-accent); margin-right: 4px; }
                .nx-q__text::after  { content:"”"; color: var(--nx-color-accent); margin-left: 4px;  }
                .nx-q__cite {
                    font-family: var(--nx-font-mono);
                    font-size: 11px;
                    letter-spacing: .22em;
                    text-transform: uppercase;
                    color: var(--nx-color-text-muted);
                    display: inline-flex; align-items: center; gap: 12px;
                    font-style: normal;
                }
                .nx-q__cite::before {
                    content:""; width: 24px; height: 1px;
                    background: var(--nx-color-accent);
                }

                /* ─────────────────── 08 — BRANDS ──────────────────────────── */
                .nx-brands {
                    border-top: 1px solid var(--nx-color-line);
                    border-bottom: 1px solid var(--nx-color-line);
                    background: var(--nx-color-surface);
                }
                /* Logos auto-scroll in a seamless marquee (api-loader → fetchBrands
                   fills the track; inline JS clones the set + starts the loop). */
                .nx-logos-marquee {
                    width: 100%;
                    overflow: hidden;
                    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
                            mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
                }
                .nx-logos-marquee__track {
                    display: flex;
                    align-items: center;
                    width: max-content;
                    will-change: transform;
                }
                .nx-logos-marquee__track.is-running {
                    animation: nxLogosRun var(--nx-logos-dur, 40s) linear infinite;
                }
                .nx-logos-marquee:hover .nx-logos-marquee__track.is-running { animation-play-state: paused; }
                @keyframes nxLogosRun { from { transform: translateX(0); } to { transform: translateX(-50%); } }

                .nx-logos-marquee__track .logo-item {
                    flex: 0 0 auto;
                    margin: 0 clamp(20px, 3vw, 44px);
                    width: clamp(110px, 13vw, 160px);
                    height: 56px;
                    display: inline-flex; align-items: center; justify-content: center;
                    text-decoration: none;
                    overflow: hidden; /* belt-and-braces: never spill past the slot */
                }
                .nx-logos-marquee__track img {
                    /* Constrain to BOTH axes — a wide logo must scale down to its
                       slot width, otherwise it overflows and overlaps neighbours
                       (most visible on mobile where slots + margins are smallest). */
                    max-height: 44px; max-width: 100%; width: auto; object-fit: contain;
                    filter: grayscale(1) brightness(0.85);
                    opacity: .68;
                    transition: filter var(--nx-dur) var(--nx-ease-out), opacity var(--nx-dur) var(--nx-ease-out), transform var(--nx-dur) var(--nx-ease-out);
                }
                .nx-logos-marquee__track .logo-item:hover img {
                    filter: grayscale(0) brightness(1);
                    opacity: 1;
                    transform: translateY(-2px);
                }
                .nx-logos-marquee__track .nx-skel-logo {
                    flex: 0 0 auto;
                    margin: 0 clamp(20px, 3vw, 44px);
                    width: clamp(110px, 13vw, 160px);
                    height: 44px;
                }
                @media (prefers-reduced-motion: reduce) {
                    /* No motion: fall back to a centered, wrapped static row. */
                    .nx-logos-marquee { -webkit-mask-image: none; mask-image: none; }
                    .nx-logos-marquee__track { flex-wrap: wrap; justify-content: center; width: auto; gap: 28px 8px; }
                    .nx-logos-marquee__track.is-running { animation: none; }
                }
                /* Mobile: tighter, evenly-sized slots so the strip stays legible
                   and never crowds — each logo fits fully inside its own slot. */
                @media (max-width: 560px) {
                    .nx-logos-marquee__track .logo-item,
                    .nx-logos-marquee__track .nx-skel-logo {
                        margin: 0 16px;
                        width: 116px;
                        height: 44px;
                    }
                    .nx-logos-marquee__track img { max-height: 38px; }
                }

                /* ─────────────────── 09 — INSIGHTS ────────────────────────── */
                #latest-articles {
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                    gap: 24px;
                }
                @media (max-width: 1080px) { #latest-articles { grid-template-columns: repeat(2, 1fr); } }
                @media (max-width: 640px)  { #latest-articles { grid-template-columns: 1fr; } }

                /* ─ Article card (rendered by api-loader → fetchFeaturedArticles) ─ */
                .nx-article {
                    display: flex;
                    flex-direction: column;
                    background: var(--nx-color-surface);
                    border: 1px solid var(--nx-color-line);
                    border-radius: var(--nx-radius-lg);
                    overflow: hidden;
                    text-decoration: none;
                    color: inherit;
                    transition:
                        border-color var(--nx-dur) var(--nx-ease-out),
                        transform var(--nx-dur) var(--nx-ease-out),
                        background var(--nx-dur) var(--nx-ease-out);
                    isolation: isolate;
                }
                .nx-article:hover {
                    border-color: var(--nx-color-line-strong);
                    background: var(--nx-color-surface-2);
                    transform: translateY(-3px);
                }
                .nx-article__media {
                    position: relative;
                    aspect-ratio: 16 / 10;
                    margin: 0;
                    overflow: hidden;
                    background: var(--nx-color-surface-2);
                }
                .nx-article__media img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    transition: transform .6s var(--nx-ease-out);
                }
                .nx-article:hover .nx-article__media img { transform: scale(1.04); }
                .nx-article__tag {
                    position: absolute;
                    top: 14px;
                    left: 14px;
                    font-family: var(--nx-font-mono);
                    font-size: 10px;
                    letter-spacing: .22em;
                    text-transform: uppercase;
                    color: var(--nx-color-accent);
                    background: rgba(10, 9, 8, .72);
                    border: 1px solid var(--nx-color-line);
                    backdrop-filter: blur(6px);
                    padding: 6px 10px;
                    border-radius: 999px;
                    line-height: 1;
                }
                .nx-article__body {
                    padding: clamp(20px, 2vw, 28px);
                    display: flex;
                    flex-direction: column;
                    gap: 10px;
                    flex: 1 1 auto;
                }
                .nx-article__meta {
                    font-family: var(--nx-font-mono);
                    font-size: 10.5px;
                    letter-spacing: .2em;
                    text-transform: uppercase;
                    color: var(--nx-color-text-muted);
                    margin: 0;
                }
                .nx-article__title {
                    font-family: var(--nx-font-display);
                    font-weight: 600;
                    font-size: clamp(1.05rem, 1.2vw, 1.30rem);
                    line-height: 1.25;
                    letter-spacing: -.018em;
                    color: var(--nx-color-text);
                    margin: 0;
                }
                .nx-article__excerpt {
                    font-family: var(--nx-font-sans);
                    font-size: 13.5px;
                    line-height: 1.55;
                    color: var(--nx-color-text-muted);
                    margin: 0;
                }
                .nx-article__cta {
                    margin-top: auto;
                    padding-top: 14px;
                    font-family: var(--nx-font-sans);
                    font-size: 12.5px;
                    font-weight: 500;
                    color: var(--nx-color-accent);
                    display: inline-flex;
                    align-items: center;
                    gap: 6px;
                    transition: gap var(--nx-dur) var(--nx-ease-out);
                }
                .nx-article:hover .nx-article__cta { gap: 12px; }


                /* ─────────────────── 10 — FINAL CTA ───────────────────────── */
                .nx-final {
                    position: relative;
                    overflow: hidden;
                    isolation: isolate;
                    padding-block: clamp(120px, 16vw, 192px);
                    border-top: 1px solid var(--nx-color-line);
                    text-align: center;
                }
                .nx-final::before {
                    content:""; position: absolute; inset: 0; z-index: -1;
                    background:
                        radial-gradient(ellipse 70% 55% at 50% 50%, rgba(197, 205, 214,.16), transparent 70%);
                    pointer-events: none;
                }
                .nx-final__motes {
                    position: absolute; inset: 0; z-index: -1;
                    pointer-events: none;
                }
                .nx-final__motes span {
                    position: absolute;
                    width: 4px; height: 4px;
                    background: var(--nx-color-accent);
                    border-radius: 50%;
                    opacity: .25;
                    filter: blur(.4px);
                    animation: nxMoteFloat 9s ease-in-out infinite alternate;
                }
                @keyframes nxMoteFloat {
                    0%   { transform: translate3d(0, 0, 0)     scale(1);    opacity: .15; }
                    50%  { opacity: .35; }
                    100% { transform: translate3d(20px, -28px, 0) scale(1.3); opacity: .15; }
                }
                .nx-final__inner {
                    max-width: var(--nx-w-prose);
                    margin: 0 auto;
                    display: flex; flex-direction: column; align-items: center;
                    gap: 28px;
                }
                .nx-final__title {
                    font-family: var(--nx-font-display);
                    font-weight: 700;
                    font-size: clamp(2.5rem, 7vw, 5.5rem);
                    line-height: 1.02;
                    letter-spacing: -.034em;
                    color: var(--nx-color-text);
                    margin: 0;
                    max-width: 18ch;
                }
                .nx-final__title em {
                    font-family: var(--nx-font-serif);
                    font-style: italic;
                    font-weight: 400;
                    color: var(--nx-color-accent);
                    letter-spacing: -.005em;
                }
                .nx-final__lede {
                    color: var(--nx-color-text-muted);
                    font-size: clamp(1rem, 1.4vw, 1.18rem);
                    line-height: 1.6;
                    margin: 0;
                    max-width: 56ch;
                }
                .nx-final__cta {
                    display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
                    margin-top: 8px;
                }
                .nx-final__end {
                    margin-top: 18px;
                    font-family: var(--nx-font-mono);
                    color: var(--nx-color-accent);
                    font-size: 22px;
                    line-height: 1;
                }

                /* ─────────────────── Reduced motion ────────────────────────── */
                @media (prefers-reduced-motion: reduce) {
                    .nx-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
                    [data-words] .word,
                    .nx-scrub-word { opacity: 1 !important; transform: none !important; animation: none !important; }
                    [data-nx-tilt],
                    [data-nx-magnet] { transition: none !important; transform: none !important; }
                    .nx-marquee__track,
                    .nx-final__motes span,
                    .nx-hero__eyebrow-spark,
                    .nx-hero__hud-dot,
                    .nx-fx-orbit-ring { animation: none !important; }
                }

                @keyframes nxOrbitRot {
                    to { transform: rotate(360deg); }
                }

/* ---- from home.php lines 2023-2044 ---- */
                    .nx-trust { padding: clamp(28px, 4vw, 44px) 0; border-block: 1px solid rgba(241,237,228,.07); }
                    .nx-trust__inner { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }
                    .nx-trust__points {
                        display: grid; grid-template-columns: repeat(4, 1fr);
                        gap: clamp(14px, 2.5vw, 32px); text-align: center;
                    }
                    @media (max-width: 760px) { .nx-trust__points { grid-template-columns: repeat(2, 1fr); gap: 22px; } }
                    .nx-trust__point b {
                        display: block; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700;
                        letter-spacing: -.02em; color: var(--nx-color-text,#F1EDE4); line-height: 1.05;
                    }
                    .nx-trust__point span { font-size: .8rem; color: var(--nx-color-text-muted,#9b9690); }
                    .nx-trust__divider { height: 1px; background: rgba(241,237,228,.07); margin: clamp(22px,3vw,32px) 0; }
                    .nx-trust__stack { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; }
                    .nx-trust__stack-label { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--nx-color-text-muted,#9b9690); margin-right: 4px; }
                    .nx-trust__stack span:not(.nx-trust__stack-label) {
                        font-size: .82rem; color: var(--nx-color-text,#F1EDE4);
                        border: 1px solid rgba(241,237,228,.12); border-radius: 999px; padding: 6px 14px;
                        background: rgba(241,237,228,.02);
                    }

/* ---- from home.php lines 2172-2186 ---- */
                .nx-bystage__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: clamp(32px, 5vw, 56px); }
                @media (max-width: 980px) { .nx-bystage__grid { grid-template-columns: repeat(2, 1fr); } }
                @media (max-width: 560px) { .nx-bystage__grid { grid-template-columns: 1fr; } }
                .nx-bystage__card { position: relative; display: flex; flex-direction: column; padding: 27px 24px 24px; overflow: hidden; text-decoration: none; color: inherit; border: 1px solid var(--nx-color-line); border-radius: var(--nx-radius-lg); background: var(--nx-color-surface); transition: border-color var(--nx-dur, .3s) var(--nx-ease-out), transform var(--nx-dur, .3s) var(--nx-ease-out), background var(--nx-dur, .3s) var(--nx-ease-out); }
                .nx-bystage__card::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s ease; background: radial-gradient(80% 70% at 80% 0%, color-mix(in srgb, var(--tier) 16%, transparent), transparent 60%); }
                .nx-bystage__card:hover { border-color: var(--tier); transform: translateY(-4px); background: var(--nx-color-surface-2); }
                .nx-bystage__card:hover::after { opacity: 1; }
                .nx-bystage__top { position: relative; margin-bottom: 14px; }
                .nx-bystage__name { display: block; font-family: var(--nx-font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -.02em; line-height: 1; color: var(--nx-color-text); }
                .nx-bystage__seg { display: block; margin-top: 7px; font-family: var(--nx-font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--tier); }
                .nx-bystage__line { position: relative; flex: 1 1 auto; font-size: .92rem; line-height: 1.5; color: var(--nx-color-text-muted); margin: 0 0 18px; }
                .nx-bystage__perk { position: relative; align-self: flex-start; font-family: var(--nx-font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--tier); border: 1px solid color-mix(in srgb, var(--tier) 50%, var(--nx-color-line)); border-radius: 999px; padding: 5px 10px; margin-bottom: 16px; }
                .nx-bystage__arrow { position: relative; font-family: var(--nx-font-sans); font-size: .85rem; font-weight: 500; color: var(--tier); }

/* ---- from home.php lines 2332-2361 ---- */
                    .nx-case__card {
                        display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
                        gap: clamp(24px, 4vw, 56px); align-items: center;
                        max-width: 1100px; margin: clamp(32px,5vw,56px) auto 0;
                        padding: clamp(28px, 4vw, 48px);
                        border: 1px solid rgba(241,237,228,.10); border-radius: 24px;
                        background:
                            radial-gradient(120% 120% at 100% 0%, rgba(214,179,127,.08), transparent 60%),
                            rgba(20,18,16,.5);
                    }
                    @media (max-width: 820px) { .nx-case__card { grid-template-columns: minmax(0, 1fr); } .nx-case__media { margin: 0; } }
                    .nx-case__content, .nx-case__media { min-width: 0; max-width: 100%; }
                    .nx-case__tag { font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--nx-color-accent,#d6b37f); margin: 0 0 14px; }
                    .nx-case__title { font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.1; font-weight: 600; letter-spacing: -.02em; color: var(--nx-color-text,#F1EDE4); margin: 0 0 16px; }
                    .nx-case__body { font-size: 1rem; line-height: 1.66; color: var(--nx-color-text-muted,#9b9690); margin: 0 0 22px; max-width: 56ch; }
                    .nx-case__metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0 0 24px; }
                    @media (max-width: 380px) { .nx-case__metrics { grid-template-columns: minmax(0, 1fr); gap: 14px; } }
                    .nx-case__metric { min-width: 0; overflow-wrap: break-word; border-left: 1px solid var(--nx-color-line); padding-left: 15px; }
                    .nx-case__metric b { display: block; font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 700; color: var(--nx-color-text,#F1EDE4); line-height: 1; letter-spacing: -.02em; }
                    .nx-case__metric span { font-size: .76rem; color: var(--nx-color-text-muted,#9b9690); }
                    .nx-case__stack { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
                    .nx-case__stack span { font-size: .74rem; color: var(--nx-color-text-muted,#9b9690); border: 1px solid rgba(241,237,228,.12); border-radius: 999px; padding: 5px 11px; }
                    .nx-case__media {
                        aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden;
                        position: relative; background: linear-gradient(135deg, rgba(214,179,127,.14), rgba(20,18,16,.6));
                        border: 1px solid rgba(241,237,228,.08);
                        display: grid; place-items: center;
                    }
                    .nx-case__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
                    .nx-case__media-ph { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(241,237,228,.4); }

/* ---- from home.php lines 2600-2711 ---- */
                    /* ── Distinct band: elevated surface + faint dot-grid, clearly
                          different from the plain dark sections around it. ──────── */
                    .nx-leaders {
                        background: var(--nx-color-surface-2, #1C1815);
                        border-block: 1px solid rgba(241,237,228,.07);
                        overflow: hidden;
                    }
                    .nx-leaders::before {
                        content: ""; position: absolute; inset: 0; z-index: -2;
                        background-image: radial-gradient(rgba(241,237,228,.05) 1px, transparent 1px);
                        background-size: 26px 26px;
                        mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 75%);
                        -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 75%);
                    }

                    /* ── Interactive REVEAL CARDS ──────────────────────────────
                       A real mouse reveals the leader's focus + contact on hover;
                       touch taps; keyboard toggles with Enter/Space. NO 3D
                       transforms — just a cross-fade + slide between two stacked
                       layers — so it renders identically on every device. The
                       trigger is pointer-type aware in JS below (no fragile
                       hover/pointer media queries that misfire on touch laptops). */
                    .nx-leaders__grid {
                        display: grid; grid-template-columns: repeat(2, 1fr);
                        gap: clamp(16px, 3vw, 28px);
                        max-width: 960px; margin: clamp(32px,5vw,56px) auto 0;
                    }
                    @media (max-width: 680px) { .nx-leaders__grid { grid-template-columns: 1fr; } }

                    .nx-leader {
                        position: relative;
                        min-height: 326px;
                        border-radius: 20px;
                        cursor: pointer;
                        overflow: hidden;
                        border: 1px solid rgba(241,237,228,.10);
                        background: #0E0C0A;
                        transition: border-color .35s ease, box-shadow .35s ease,
                                    background .35s ease, transform .35s ease;
                    }
                    .nx-leader.is-open {
                        border-color: rgba(197, 205, 214,.45);
                        background: linear-gradient(155deg, #15171B, #0E0C0A 72%);
                        box-shadow: 0 18px 50px -28px rgba(197, 205, 214,.7),
                                    inset 0 0 0 1px rgba(197, 205, 214,.12);
                        transform: translateY(-4px);
                    }
                    .nx-leader:focus-visible { outline: 2px solid var(--nx-color-accent,#C5CDD6); outline-offset: 4px; }

                    /* Two stacked layers cross-fade: the default (avatar + quote)
                       fades out as the reveal (focus + contact) fades in. */
                    .nx-leader__layer {
                        position: absolute; inset: 0;
                        padding: 30px;
                        display: flex; flex-direction: column; gap: 16px;
                        transition: opacity .4s ease, transform .4s ease;
                    }
                    .nx-leader__layer--reveal {
                        justify-content: space-between;
                        opacity: 0; transform: translateY(14px); pointer-events: none;
                    }
                    .nx-leader.is-open .nx-leader__layer--default {
                        opacity: 0; transform: translateY(-10px); pointer-events: none;
                    }
                    .nx-leader.is-open .nx-leader__layer--reveal {
                        opacity: 1; transform: translateY(0); pointer-events: auto;
                    }

                    .nx-leader__top { display: flex; align-items: center; gap: 16px; }
                    .nx-leader__avatar {
                        width: 64px; height: 64px; border-radius: 50%; flex: 0 0 auto;
                        display: grid; place-items: center;
                        font-size: 1.3rem; font-weight: 700; letter-spacing: .02em;
                        color: #120a05;
                        background: linear-gradient(135deg, #E2E7ED, var(--nx-color-accent, #C5CDD6));
                        box-shadow: 0 0 0 1px rgba(197, 205, 214,.35), 0 8px 22px -10px rgba(197, 205, 214,.6);
                    }
                    .nx-leader__name { font-size: 1.18rem; font-weight: 600; color: var(--nx-color-text,#F1EDE4); margin: 0; }
                    .nx-leader__role { font-size: .82rem; color: var(--nx-color-accent,#C5CDD6); margin: 2px 0 0; letter-spacing: .02em; }
                    .nx-leader__quote { font-size: 1rem; line-height: 1.62; color: var(--nx-color-text,#F1EDE4); margin: 0; opacity: .9; }

                    .nx-leader__hint {
                        margin-top: auto; font-size: .72rem; letter-spacing: .05em;
                        color: var(--nx-color-text-muted,#9b9690);
                        display: inline-flex; align-items: center; gap: 7px;
                    }
                    .nx-leader__hint::before {
                        content: "⟲"; color: var(--nx-color-accent,#C5CDD6); font-size: .95rem;
                    }
                    .nx-leader__back-label { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--nx-color-accent,#C5CDD6); margin: 0; }
                    .nx-leader__focus { font-size: .98rem; line-height: 1.6; color: var(--nx-color-text,#F1EDE4); margin: 0; }
                    .nx-leader__badge {
                        display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
                        font-size: .74rem; color: var(--nx-color-text,#F1EDE4);
                        border: 1px solid rgba(197, 205, 214,.4); border-radius: 999px; padding: 5px 12px;
                        background: rgba(197, 205, 214,.08);
                    }
                    .nx-leader__badge .nx-dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,.2); }
                    .nx-leader__links { display: flex; gap: 10px; flex-wrap: wrap; }
                    .nx-leader__links a {
                        font-size: .78rem; color: var(--nx-color-text,#F1EDE4);
                        text-decoration: none; border: 1px solid rgba(241,237,228,.18);
                        padding: 7px 14px; border-radius: 999px;
                        transition: color .15s, border-color .15s, background .15s;
                    }
                    .nx-leader__links a:hover { border-color: var(--nx-color-accent,#C5CDD6); background: rgba(197, 205, 214,.14); }

                    @media (prefers-reduced-motion: reduce) {
                        .nx-leader, .nx-leader__layer { transition: none; }
                    }

/* ---- from home.php lines 2900-2926 ---- */
                    .nx-faq__list { max-width: 820px; margin: clamp(32px,5vw,56px) auto 0; }
                    .nx-faq__item {
                        border: 1px solid rgba(241,237,228,.08);
                        border-radius: 16px; margin-bottom: 12px;
                        background: rgba(241,237,228,.02);
                        overflow: hidden; transition: border-color .2s ease, background .2s ease;
                    }
                    .nx-faq__item[open] { border-color: rgba(214,179,127,.30); background: rgba(214,179,127,.04); }
                    .nx-faq__q {
                        list-style: none; cursor: pointer;
                        display: flex; align-items: center; justify-content: space-between; gap: 18px;
                        padding: 20px 24px; font-size: 1.04rem; font-weight: 500;
                        color: var(--nx-color-text, #F1EDE4);
                    }
                    .nx-faq__q::-webkit-details-marker { display: none; }
                    .nx-faq__q::after {
                        content: "+"; font-size: 1.5rem; line-height: 1; font-weight: 300;
                        color: var(--nx-color-accent, #d6b37f); transition: transform .25s ease;
                    }
                    .nx-faq__item[open] .nx-faq__q::after { transform: rotate(45deg); }
                    .nx-faq__a {
                        padding: 0 24px 22px; font-size: .96rem; line-height: 1.65;
                        color: var(--nx-color-text-muted, #9b9690); max-width: 68ch;
                    }
                    .nx-faq__a a { color: var(--nx-color-accent, #d6b37f); }

/* ---- from home.php lines 3067-3102 ---- */
                    .nx-cta { position: relative; }
                    .nx-cta__inner {
                        max-width: 1100px; margin: 0 auto;
                        padding: clamp(40px, 6vw, 72px);
                        border: 1px solid rgba(241,237,228,.10);
                        border-radius: 28px;
                        background:
                            radial-gradient(120% 140% at 0% 0%, rgba(214,179,127,.10), transparent 55%),
                            radial-gradient(120% 140% at 100% 100%, rgba(214,179,127,.06), transparent 55%),
                            rgba(20,18,16,.55);
                        backdrop-filter: blur(8px);
                        text-align: center;
                    }
                    .nx-cta__title {
                        font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.05;
                        font-weight: 600; letter-spacing: -.02em; margin: 14px 0 16px;
                        color: var(--nx-color-text, #F1EDE4);
                    }
                    .nx-cta__title em { color: var(--nx-color-accent, #d6b37f); font-style: normal; }
                    .nx-cta__lede {
                        font-size: 1.05rem; line-height: 1.6; max-width: 56ch;
                        margin: 0 auto 28px; color: var(--nx-color-text-muted, #9b9690);
                    }
                    .nx-cta__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
                    .nx-cta__promise {
                        margin-top: 24px; font-size: .82rem; letter-spacing: .02em;
                        color: var(--nx-color-text-muted, #9b9690);
                        display: inline-flex; align-items: center; gap: 8px;
                    }
                    .nx-cta__promise .nx-dot {
                        width: 8px; height: 8px; border-radius: 50%;
                        background: #4ade80; box-shadow: 0 0 0 4px rgba(74,222,128,.18);
                        display: inline-block;
                    }

/* ---- Rendering budget (TKT-0008) ----
   Below-the-fold sections skip style/layout/paint until they come near the
   viewport. Every web-font arrival re-lays-out all text on the page, and on
   a throttled phone each full pass cost 200-800 ms; skipped sections make
   those passes cheap. "auto" in contain-intrinsic-size makes the browser
   remember each section's real height once it has rendered, so the scroll
   length settles after the first pass. #pipeline is left out: the scroll
   engine reads its geometry on every scroll tick. No section here holds
   sticky or fixed children (paint containment would re-anchor them). */
@supports (content-visibility: auto) {
    section#trust,
    section#disciplines,
    section#by-stage,
    section#featured-case,
    section#nx-work-static,
    section#nello-spotlight,
    section#voices,
    section#leadership,
    section#brands,
    section#faq,
    section#insights,
    section#start {
        content-visibility: auto;
        contain-intrinsic-size: auto 900px;
    }
    /* Placeholder heights = each section's real CONTENT-box height (padding is
       added on top of contain-intrinsic-size), measured 2026-10-23 with live
       content in Chrome at 1440x900 and 390x844, so the scroll length and
       scroll position don't jump as skipped sections render. Re-measure if a
       section's content changes a lot. */
    section#trust { contain-intrinsic-size: auto 163px; }
    section#disciplines { contain-intrinsic-size: auto 1421px; }
    section#by-stage { contain-intrinsic-size: auto 628px; }
    section#featured-case { contain-intrinsic-size: auto 785px; }
    section#nx-work-static { contain-intrinsic-size: auto 1421px; }
    section#nello-spotlight { contain-intrinsic-size: auto 935px; }
    section#voices { contain-intrinsic-size: auto 527px; }
    section#leadership { contain-intrinsic-size: auto 651px; }
    section#brands { contain-intrinsic-size: auto 246px; }
    section#faq { contain-intrinsic-size: auto 702px; }
    section#insights { contain-intrinsic-size: auto 884px; }
    section#start { contain-intrinsic-size: auto 474px; }
    @media (max-width: 767px) {
        section#trust { contain-intrinsic-size: auto 297px; }
        section#disciplines { contain-intrinsic-size: auto 3394px; }
        section#by-stage { contain-intrinsic-size: auto 1354px; }
        section#featured-case { contain-intrinsic-size: auto 1020px; }
        section#nx-work-static { contain-intrinsic-size: auto 3016px; }
        section#nello-spotlight { contain-intrinsic-size: auto 1379px; }
        section#voices { contain-intrinsic-size: auto 427px; }
        section#leadership { contain-intrinsic-size: auto 911px; }
        section#brands { contain-intrinsic-size: auto 191px; }
        section#faq { contain-intrinsic-size: auto 703px; }
        section#insights { contain-intrinsic-size: auto 1641px; }
        section#start { contain-intrinsic-size: auto 589px; }
    }
}

/* Hyphenated words in [data-words] text: nexlla-home-fx.js wraps every word
   in an inline-block span, and an inline-block can't break after its hyphen.
   Plain text can, so before the script ran the hero lede wrapped onto one
   line fewer and the whole hero panel jumped down when the script ran
   (a 0.25 CLS on mobile). Keeping those words unbroken from the first paint
   gives the same line breaks before and after the split. (TKT-0008) */
.nx-nobr { white-space: nowrap; }