/* ==========================================================================
   NullCloud.ai — landing page styles
   Scoped with the .nc- prefix so nothing here leaks into the shared system.
   Reuses global tokens from infrashield-website-prototype.css (:root vars).
   ========================================================================== */

.nc-page {
    --nc-blue: #214292;          /* NullCloud primary (logo) */
    --nc-light: #69b2e1;         /* InfraShield light blue */
    --nc-ink: #101828;           /* --900 */
    --nc-ink-deep: #0a0f1c;
    --nc-max: 1440px;
    --nc-pad: var(--paddingwrappersides);

    /* Scroll-driven inversion (updated by JS; defaults = dark/top state).
       As the user scrolls hero -> lead -> white section these flip. */
    --nc-invert: 0;                          /* 0 = dark top, 1 = fully light */
    --nc-dyn-bg: #0a0f1c;                     /* navy  -> white  */
    --nc-dyn-fg: #ffffff;                     /* white -> navy   (headings)   */
    --nc-dyn-accent: #69b2e1;                 /* light blue -> deep navy blue  */
    --nc-dyn-muted: #ced6e0;                  /* soft white -> slate (body)    */
    --nc-dyn-btn-bg: #ffffff;                 /* white -> navy   (primary btn) */
    --nc-dyn-btn-fg: #101828;                 /* navy  -> white  (primary btn) */
    --nc-glow-op: 1;                          /* product glow fades out on scroll */

    background: #fff;
    overflow-x: clip;
}

.nc-page * {
    cursor: none;
}

.nc-wrap {
    width: 100%;
    max-width: var(--nc-max);
    margin-inline: auto;
    padding-inline: var(--nc-pad);
}

.nc-eyebrow {
    font-family: var(--font--family--medium);
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    color: var(--nc-light);
    margin: 0;
}

.nc-eyebrow.is-dark { color: var(--infrashield-darkblueprimary); }

/* ==========================================================================
   HERO
   ========================================================================== */

.nc-hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 100px var(--nc-pad) 80px;
    background: var(--nc-dyn-bg);
    overflow: visible;
    isolation: isolate;
}

/* faint technical grid — fades away as the background inverts to light */
.nc-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(105, 178, 225, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(105, 178, 225, 0.06) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(80% 60% at 50% 40%, #000 0%, transparent 80%);
    -webkit-mask-image: radial-gradient(80% 60% at 50% 40%, #000 0%, transparent 80%);
    opacity: calc(1 - var(--nc-invert));
    z-index: 0;
    pointer-events: none;
}

.nc-hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--nc-max);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
}

/* Logo crossfade: light-blue mark on dark -> color mark on light */
.nc-hero-logo-wrap {
    position: relative;
    display: inline-flex;
    width: min(250px, 40vw);
    opacity: 0;
    animation: nc-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}

.nc-hero-logo {
    width: 100%;
    height: auto;
    display: block;
}

.nc-hero-logo-wrap .nc-logo-dark {
    position: absolute;
    inset: 0;
    opacity: var(--nc-invert);
}

.nc-hero-logo-wrap .nc-logo-light { opacity: calc(1 - var(--nc-invert)); }

.nc-hero-eyebrow {
    color: var(--nc-dyn-accent);
    opacity: 0;
    animation: nc-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}

.nc-hero h1 {
    margin: 0;
    font-family: var(--font--family--title);
    color: var(--nc-dyn-fg);
    font-weight: 700;
    font-size: clamp(34px, 6vw, 68px);
    line-height: 1.02;
    letter-spacing: -1px;
    max-width: 16ch;
    opacity: 0;
    animation: nc-rise 1s cubic-bezier(0.22, 1, 0.36, 1) 0.42s forwards;
}

.nc-hero h1 span { color: var(--nc-dyn-accent); }

/* ---- NullCloud.ai + vTraq® integration page: hero logo lockup + wider H1 ---- */
.nc-hero-lockup {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 2.6vw, 26px);
    opacity: 0;
    animation: nc-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}
/* logos sit inline and are sized by height so the two brands align */
.nc-hero-lockup .nc-hero-logo-wrap {
    width: auto;
    opacity: 1;              /* the lockup wrapper handles the entrance animation */
    animation: none;
}
.nc-hero-lockup .nc-hero-logo { width: auto; height: clamp(30px, 5vw, 46px); }
/* the vTraq wordmark reads heavier — trim it slightly to balance NullCloud.ai */
.nc-hero-lockup .nc-hero-logo-wrap--vtraq .nc-hero-logo { height: clamp(24px, 4.1vw, 38px); }

.nc-hero-plus {
    font-family: var(--font--family--title);
    font-weight: 700;
    font-size: clamp(22px, 3.4vw, 34px);
    line-height: 1;
    color: var(--nc-dyn-fg);
    opacity: 0.85;
}

/* wider headline so "OT Vulnerability Management" stays on one line */
.nc-vtraq .nc-hero h1 { max-width: min(92vw, 1180px); }

/* hero button colors follow the inversion so they never disappear */
.nc-hero .nc-hero-cta .button-main {
    background: var(--nc-dyn-btn-bg);
    border-color: var(--nc-dyn-btn-bg);
}
.nc-hero .nc-hero-cta .button-main .button-text,
.nc-hero .nc-hero-cta .button-main .button-icon,
.nc-hero .nc-hero-cta .button-main .button-icon i { color: var(--nc-dyn-btn-fg); }

/* the divider that separates the arrow must invert too (defaults to var(--900)) */
.nc-hero .nc-hero-cta .button-main .button-icon { border-left-color: var(--nc-dyn-btn-fg); }
.nc-hero .nc-hero-cta .button-main .button-icon-left { border-right-color: var(--nc-dyn-btn-fg); }

.nc-hero .nc-hero-cta .button-secondary .button-text {
    color: var(--nc-dyn-fg);
    border-bottom-color: var(--nc-dyn-fg);
}

/* Product render + glow */
.nc-hero-stage {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nc-hero-glow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(920px, 148vw);
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%) scale(1);
    /* fully transparent well before the edge -> never a hard clip */
    background: radial-gradient(circle,
        rgba(58, 83, 164, 0.50) 0%,
        rgba(105, 178, 225, 0.22) 28%,
        rgba(16, 24, 40, 0) 60%);
    filter: blur(12px);
    /* base opacity is scroll-driven; the load-in animation runs once then hands back */
    opacity: var(--nc-glow-op);
    z-index: 0;
    pointer-events: none;
    animation: nc-glow-in 1.6s ease-out 0.55s backwards;
}

.nc-hero-render {
    position: relative;
    z-index: 1;
    width: min(760px, 75vw);
    height: auto;
    filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.55));
    transform-origin: center 60%;
    /* start way oversized ("fills the screen") and settle to rest */
    animation: nc-hero-settle 1.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* reflection under the appliance */
.nc-hero-render::after { content: none; }

.nc-hero-cta {
    z-index: 4;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
    opacity: 0;
    animation: nc-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.9s forwards;
}

.nc-scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--font--family--book);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0;
    animation: nc-fade 4s ease 6s forwards;
}

.nc-scroll-cue i { animation: nc-bob 1.8s ease-in-out infinite; }

@keyframes nc-hero-settle {
    0%   { transform: scale(4.2) translateY(3%); opacity: 0; filter: drop-shadow(0 40px 60px rgba(0,0,0,0.55)) blur(8px); }
    40%  { opacity: 1; }
    100% { transform: scale(1) translateY(0); opacity: 1; filter: drop-shadow(0 40px 60px rgba(0,0,0,0.55)) blur(0); }
}

@keyframes nc-glow-in {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes nc-rise {
    0%   { opacity: 0; transform: translateY(26px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes nc-fade { to { opacity: 1; } }

@keyframes nc-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(6px); }
}

/* ==========================================================================
   SHARED SECTION SCAFFOLD
   ========================================================================== */

.nc-section { position: relative; padding: 120px 0; }

.nc-section.is-light {
    background: radial-gradient(ellipse at top left, #eaf5ff 0%, #ffffff 42%);
}

.nc-section.is-dark {
    /* base navy + a light-blue glow pooled in the bottom-right, fading toward the
       left/top. The glow layer is viewport-fixed so it stays in the visible corner
       whether the panel itself is sticky or (for the last panel) only its inner
       wrap is — otherwise the glow scrolls up and gets cut off while pinned. */
    background:
        radial-gradient(58% 68% at 100% 100%, rgba(105, 178, 225, 0.16), transparent 72%) fixed,
        linear-gradient(180deg, #0d1424 0%, #101828 100%);
    color: #fff;
}

.nc-section-head {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 760px;
    margin-bottom: 30px;
}

.nc-section-head.is-center { align-items: center; text-align: center; margin-inline: auto; }

.nc-h2 {
    margin: 0;
    font-family: var(--font--family--title);
    font-weight: 700;
    font-size: clamp(30px, 4.4vw, 50px);
    line-height: 1.05;
    letter-spacing: -0.5px;
    color: var(--nc-ink);
}

.nc-section.is-dark .nc-h2 { color: #fff; }
.nc-h2 span { color: var(--nc-light); }
.nc-section.is-light .nc-h2 span { color: var(--infrashield-darkblueprimary); }

.nc-lead-p {
    font-family: var(--font--family--book);
    font-size: clamp(16px, 1.5vw, 19px);
    line-height: 1.65;
    color: var(--600);
}

.nc-section.is-dark .nc-lead-p { color: rgba(255, 255, 255, 0.72); }

/* ==========================================================================
   LEAD / INTRO
   ========================================================================== */

.nc-lead {
    background: var(--nc-dyn-bg);
    color: var(--nc-dyn-fg);
    padding: 110px 0;
    /* the product image is scaled up and bleeds off the right edge */
    overflow-x: clip;
    margin-top: -1px;
}

.nc-lead .nc-lead-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

.nc-lead-text {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

/* The visual column is a positioning box that only reserves height; the
   render is taken out of flow so the text column keeps a true 50%. The image
   is scaled up, anchored at the column's left edge, and its right ~half bleeds
   past the viewport where .nc-lead's overflow-x: clip crops it artistically. */
.nc-lead-visual {
    position: relative;
    min-height: clamp(360px, 34vw, 470px);
}

.nc-lead-render {
    position: absolute;
    top: 50%;
    left: -6%;
    width: min(84vw, 1240px);
    max-width: none;
    height: auto;
    transform: translateY(-50%);
    filter: drop-shadow(0 30px 55px rgba(0, 0, 0, 0.30));
}

.nc-lead-vtraq {
    left: 0;
    width: min(60vw, 1100px);
}

.nc-lead h2 {
    margin: 0;
    font-family: var(--font--family--title);
    font-weight: 700;
    font-size: clamp(28px, 3.6vw, 44px);
    line-height: 1.08;
    letter-spacing: -0.5px;
    color: var(--nc-dyn-fg);
}

.nc-lead h2 span { color: var(--infrashield-darkblueprimary); }

.nc-lead-copy p {
    font-family: var(--font--family--book);
    font-size: clamp(16px, 1.5vw, 19px);
    line-height: 1.7;
    color: var(--nc-dyn-muted);
    margin: 0 0 22px;
}

.nc-lead-copy p:last-child { margin-bottom: 0; }

/* ==========================================================================
   ORCHESTRATION IN A BOX
   ========================================================================== */

.nc-orch-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 56px;
    align-items: center;
}

.nc-orch-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nc-orch-visual::before {
    content: "";
    position: absolute;
    inset: 6% 0;
    background: radial-gradient(60% 55% at 50% 50%, rgba(33, 66, 146, 0.22) 0%, rgba(255, 255, 255, 0) 70%);
    z-index: 0;
}

.nc-orch-render {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 540px;
    height: auto;
    filter: drop-shadow(0 30px 45px rgba(16, 24, 40, 0.15));
}

.nc-orch-copy .nc-h2 { margin-bottom: 22px; }
.nc-orch-copy .nc-lead-p { margin-bottom: 22px; }

.nc-orch-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}

.nc-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid rgba(33, 66, 146, 0.28);
    background: rgba(33, 66, 146, 0.06);
    color: var(--infrashield-darkblueprimary);
    font-family: var(--font--family--medium);
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
}

.nc-chip i { color: var(--nc-light); }

/* Highlighted ROI stat callout */
.nc-stat-callout {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 30px;
    padding: 22px 26px;
    border-radius: 16px;
    border: 1px solid rgba(33, 66, 146, 0.22);
    background: linear-gradient(135deg, rgba(33, 66, 146, 0.09), rgba(105, 178, 225, 0.10));
}

.nc-stat-num {
    flex: none;
    font-family: var(--font--family--title);
    font-weight: 700;
    line-height: 1;
    color: var(--infrashield-darkblueprimary);
    font-size: clamp(38px, 5vw, 54px);
    letter-spacing: -1px;
}

.nc-stat-num .nc-stat-unit {
    font-size: 0.42em;
    letter-spacing: 0;
    color: var(--nc-light);
}

.nc-stat-label {
    margin: 0;
    font-family: var(--font--family--book);
    font-size: 15px;
    line-height: 1.5;
    color: var(--600);
    text-align: left;
    width: auto;
}

.nc-stat-label strong { color: var(--nc-ink); font-family: var(--font--family--medium); }

@media (max-width: 479px) {
    .nc-stat-callout { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ==========================================================================
   BENEFITS GRID
   ========================================================================== */

/* Reel: the three frames are stacked in one fixed window and the JS slides +
   fades them (translateY + opacity) one at a time as the panel is pinned. */
.nc-benefits-reel {
    position: relative;
    height: clamp(320px, 42vh, 420px);
    overflow: hidden;   /* clip to the window so frames slide in / out cleanly */
}

.nc-benefit-frame {
    position: absolute;
    inset: 0;
    display: grid;
    align-content: center;
    gap: 18px;
    will-change: transform, opacity;
    /* JS drives these; pre-JS we only show the first frame to avoid overlap */
    opacity: 0;
    pointer-events: none;
}

.nc-benefit-frame[data-frame="0"] { opacity: 1; pointer-events: auto; }

.nc-benefit-frame.is-4up { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nc-benefit-frame.is-3up {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(100%, 1080px);
    left: 0;
    right: 0;
    margin-inline: auto;   /* centre the narrower row within the reel window */
}

/* static benefits grid — for integration pages that list all cards at once
   (instead of running the scroll-scrubbed reel) */
.nc-benefit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
    margin-top: 46px;
}

.nc-benefit {
    position: relative;
    padding: 30px 28px;
    border-radius: 16px;
    /* light-blue wash from the bottom-right fading out toward top-left */
    background: linear-gradient(to top left, rgba(105, 178, 225, 0.24), rgba(105, 178, 225, 0) 78%), #fff;
    border: 1px solid rgba(16, 24, 40, 0.10);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.35s ease;
    overflow: hidden;
}

.nc-benefit:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(16, 24, 40, 0.12);
    border-color: rgba(33, 66, 146, 0.28);
}

.nc-benefit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(33, 66, 146, 0.10), rgba(105, 178, 225, 0.16));
    color: var(--infrashield-darkblueprimary);
    font-size: 20px;
    margin-bottom: 18px;
}

.nc-benefit h3 {
    margin: 0 0 8px;
    font-family: var(--font--family--title);
    font-size: 18px;
    line-height: 1.25;
    color: var(--nc-ink);
    font-weight: 700;
    /* the global stylesheet hides bare h1-h3 until .scroll-in (that JS isn't
       loaded here); this card title manages its own visibility */
    opacity: 1;
    transform: none;
}

.nc-benefit p {
    margin: 0;
    font-family: var(--font--family--book);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--600);
}

/* extra pinned dwell so the reel has room to move through all three frames —
   the taller the panel, the more scroll distance each hold + transition gets,
   so the whole reel feels slower and smoother */
@media (min-width: 992px) {
    .nc-benefits-section.nc-stack-panel { min-height: 340vh; }
}

/* No reel on touch / reduced-motion: the frame boxes dissolve (display:contents)
   so all 10 cards flow as ONE continuous grid — otherwise each 3-card frame is
   its own grid and leaves a ragged empty cell between groups. Columns step down
   3 -> 2 -> 1 as the screen narrows. */
@media (max-width: 991px), (prefers-reduced-motion: reduce) {
    .nc-benefits-reel {
        height: auto;
        perspective: none;
        overflow: visible;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
    }
    .nc-benefit-frame { display: contents; }
}

@media (max-width: 767px) {
    .nc-benefits-reel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 479px) {
    .nc-benefits-reel { grid-template-columns: 1fr; }

    .nc-lead {
        padding-top: 60px;
    }
}

/* ==========================================================================
   UNIQUELY SUITED FOR
   ========================================================================== */

.nc-suited { padding: 96px 0; }

.nc-suited-list {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

.nc-suited-pill {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 26px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    font-family: var(--font--family--medium);
    font-size: clamp(15px, 1.6vw, 18px);
    transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
}

.nc-suited-pill i { color: var(--nc-light); font-size: 0.9em; }

.nc-suited-pill:hover {
    border-color: rgba(105, 178, 225, 0.6);
    background: rgba(105, 178, 225, 0.10);
    transform: translateY(-3px);
}

/* ==========================================================================
   TECHNICAL SPECIFICATIONS
   ========================================================================== */

.nc-specs-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    /* white base so any empty trailing slot reads as a blank white cell, not a
       grey gutter; hairline dividers are drawn per-cell via box-shadow below */
    gap: 0;
    background: #fff;
    border: 1px solid rgba(16, 24, 40, 0.12);
    border-radius: 16px;
    overflow: hidden;
}

/* animated SVG blobs drifting across the tile grid — multiply keeps them a
   light-blue tint over the white tiles (clearly visible in the empty cells) */
.nc-specs-anim {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
    mix-blend-mode: multiply;
}

@media (prefers-reduced-motion: reduce) {
    .nc-specs-anim { display: none; }
}

/* each cell is a 3-row subgrid (label / value / sub) sharing its row's tracks
   with every other cell in the same row, so the three lines stay aligned no
   matter how much any single label, number or subtitle wraps */
.nc-spec {
    background: #fff;
    padding: 26px;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    align-content: start;
    gap: 8px;
    box-shadow: 0 0 0 0.5px rgba(16, 24, 40, 0.12);
    transition: background 0.3s ease;
}

.nc-spec:hover { background: #f6faff; }

.nc-spec-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font--family--medium);
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--infrashield-darkblueprimary);

    i {
        font-size: 14px;
    }
}

.nc-spec-value {
    font-family: var(--font--family--title);
    font-weight: 700;
    font-size: clamp(20px, 2vw, 26px);
    line-height: 1.1;
    color: var(--nc-ink);
    letter-spacing: -0.5px;
}

.nc-spec-value .nc-unit { font-size: 0.55em; color: var(--600); letter-spacing: 0; }

.nc-spec-sub {
    font-family: var(--font--family--book);
    font-size: 14px;
    line-height: 1.45;
    color: var(--600);
}

/* ==========================================================================
   CONFIGURATOR / VARIANTS
   ========================================================================== */

.nc-config {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: center;
}

/* configurator 3D model — same styling / behaviour as locktobox.html
   (preview image swaps to the live model on load, drag to spin, scroll to zoom) */
.nc-config-viewer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.nc-config-viewer .model-toggle-wrapper {
    position: relative;
    width: 100%;
    max-width: none;
}

.nc-config-model {
    width: 100%;
    height: min(350px, 30vh);
    background: transparent;
    /* bleeds to the card edges — the card's own overflow:hidden rounds the top */
    border-radius: 0;
    --poster-color: transparent;
    --progress-bar-color: var(--nc-light);
    cursor: grab;
}
.nc-config-model:active { cursor: grabbing; }

/* preview still shown until the GLB finishes loading */
.nc-model-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 2;
    opacity: 1;
    transition: opacity 0.35s ease, visibility 0.35s ease;
    pointer-events: none;
    background: transparent;
    border-radius: 0;
}
.nc-model-preview.is-hidden { opacity: 0; visibility: hidden; }

/* instructions pill hidden until the model is ready */
.nc-config-viewer .model-viewer-instructions {
    bottom: 8px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}
.nc-config-viewer .model-viewer-instructions.is-visible {
    opacity: 1;
    visibility: visible;
}

/* config-result body (selected-config text + meta) sits under the model.
   The card itself has no padding so the model can bleed to its edges; the
   text content gets its own inner padding here. */
.nc-result-body {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 32px 32px;
}

.nc-config-controls { display: flex; flex-direction: column; gap: 30px; }

.nc-config-group h4 {
    margin: 0 0 14px;
    font-family: var(--font--family--medium);
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--nc-light);
}

.nc-options { display: flex; flex-wrap: wrap; gap: 12px; }

.nc-option {
    appearance: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.85);
    padding: 14px 22px;
    border-radius: 12px;
    font-family: var(--font--family--medium);
    font-size: 15px;
    cursor: none;
    transition: all 0.25s ease;
}

.nc-option:hover { border-color: rgba(105, 178, 225, 0.5); color: #fff; }

.nc-option.is-active {
    border-color: var(--nc-light);
    background: linear-gradient(135deg, var(--infrashield-darkblueprimary), var(--infrashield-darkblueprimary));
    color: #fff;
    box-shadow: 0 8px 24px rgba(33, 66, 146, 0.4);
}

.nc-option[disabled] { opacity: 0.32; pointer-events: none; }

/* result card */
.nc-config-result {
    position: relative;
    border-radius: 20px;
    padding: 0;
    background: linear-gradient(160deg, rgba(33, 66, 146, 0.24), rgba(16, 24, 40, 0.5));
    border: 1px solid rgba(105, 178, 225, 0.28);
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow: hidden;
}

.nc-config-result::before {
    content: "";
    position: absolute;
    inset: 0 0 auto -20%;
    height: 100%;
    background: radial-gradient(circle, rgba(105, 178, 225, 0.28), transparent 85%);
    pointer-events: none;
    overflow: visible;
}

.nc-result-label {
    font-family: var(--font--family--medium);
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--nc-light);
    position: relative;
    margin-bottom: 8px;
}

.nc-result-part {
    font-family: var(--font--family--title);
    font-weight: 700;
    font-size: clamp(26px, 3.2vw, 40px);
    letter-spacing: -0.5px;
    color: #fff;
    margin: 12px 0 0;
    position: relative;
    transition: opacity 0.25s ease;
}

.nc-result-desc {
    font-family: var(--font--family--book);
    font-size: 16px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
    position: relative;
    margin-top: 16px;
}

.nc-result-meta {
    display: flex;
    gap: 26px;
    margin-top: 16px;
    flex-wrap: wrap;
    position: relative;
}

.nc-result-meta div span {
    display: block;
    font-family: var(--font--family--book);
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: 4px;
}

.nc-result-meta div strong {
    font-family: var(--font--family--title);
    font-size: 20px;
    color: #fff;
}

.nc-config-note {
    margin-top: 22px;
    font-family: var(--font--family--book);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
}

/* variants fallback table (accessible list of all part numbers) */
.nc-variants-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 48px;
    font-family: var(--font--family--book);
}

.nc-variants-table th,
.nc-variants-table td {
    text-align: left;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.82);
}

.nc-variants-table th {
    font-family: var(--font--family--medium);
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--nc-light);
}

.nc-variants-table td:first-child {
    font-family: var(--font--family--medium);
    color: #fff;
    white-space: nowrap;
}

.nc-variants-table tr { transition: background 0.2s ease; }
.nc-variants-table tbody tr:hover { background: rgba(105, 178, 225, 0.08); }
.nc-variants-table tr.is-highlight { background: rgba(33, 66, 146, 0.35); }

/* ==========================================================================
   MANIFESTO CLOSE
   ========================================================================== */

.nc-manifesto {
    position: relative;
    padding: 130px 0;
    background:
        radial-gradient(90% 70% at 80% 30%, rgba(33, 66, 146, 0.35) 0%, rgba(16, 24, 40, 0) 60%),
        linear-gradient(180deg, #101828 0%, #0a0f1c 100%);
    overflow: hidden;
}

.nc-manifesto-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 56px;
    align-items: center;
}

.nc-manifesto h2 {
    margin: 0 0 24px;
    font-family: var(--font--family--title);
    font-weight: 700;
    font-size: clamp(30px, 4.4vw, 52px);
    line-height: 1.04;
    letter-spacing: -0.5px;
    color: #fff;
}

.nc-manifesto h2 span { color: var(--nc-light); }

.nc-manifesto p:not(.nc-eyebrow) {
    font-family: var(--font--family--book);
    font-size: clamp(16px, 1.6vw, 19px);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.75);
    max-width: 60ch;
    margin: 0 0 34px;
}

/* the kinetic tagline */
.nc-kinetic {
    font-family: var(--font--family--title);
    font-weight: 700;
    font-size: clamp(22px, 3vw, 34px);
    line-height: 1.15;
    letter-spacing: -0.5px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nc-kinetic .nc-line { overflow: hidden; }

.nc-kinetic .nc-line > span {
    display: inline-block;
    transform: translateY(105%);
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.nc-kinetic .nc-line:nth-child(2) > span { transition-delay: 0.12s; }
.nc-kinetic .nc-accent { color: var(--nc-light); }

.is-inview .nc-kinetic .nc-line > span { transform: translateY(0); }

.nc-manifesto-visual {
    position: relative;
    display: flex;
    justify-content: center;
}

.nc-manifesto-render {
    width: 100%;
    max-width: 620px;
    height: auto;
    filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.6));
}

/* ==========================================================================
   STICKY-STACK SECTIONS  (Benefits -> Suited For -> Tech Specs -> Configurator
   -> Manifesto).  Each panel pins in place, and the next slides up over it
   (higher z-index) as the user scrolls down.
   ========================================================================== */

.nc-stack {
    position: relative;
    --nc-panel-h: 115vh;   /* total flow height per panel = dwell + cover */
}

.nc-stack-panel {
    position: sticky;
    top: 0;
    min-height: var(--nc-panel-h);
    padding: 0;                 /* inner wrapper owns the padding */
    /* opaque background (from is-dark / is-light / nc-manifesto) is required
       so a panel fully covers the one beneath it */
    overflow: hidden;
}

/* centre a panel's content in the viewport while it is pinned */
.nc-stack-panel > .nc-wrap {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 60px;
    padding-bottom: 60px;
}

/* The last panel is a special case: a sibling sticky element only pins while
   there is scroll room after it inside .nc-stack, and the last child has none.
   So we keep its full-height flow (so the panel before it stays pinned until
   this one rises to cover it), but let the INNER .nc-wrap pin instead of the
   panel itself — that gives it a real dwell before it releases to the sales CTA.
   (overflow must be visible, or the sticky child can't pin to the viewport.) */
.nc-stack-panel:last-child {
    position: relative;
    overflow: visible;
    min-height: var(--nc-panel-h);
}
.nc-stack-panel:last-child > .nc-wrap {
    position: sticky;
    top: 0;
}

/* stacking order: later panels paint above earlier ones */
.nc-stack-panel:nth-of-type(1) { z-index: 1; }
.nc-stack-panel:nth-of-type(2) { z-index: 2; }
.nc-stack-panel:nth-of-type(3) { z-index: 3; }
.nc-stack-panel:nth-of-type(4) { z-index: 4; }
.nc-stack-panel:nth-of-type(5) { z-index: 5; }

/* On touch / small screens the pin/cover is dropped: normal vertical flow.
   The :last-child overrides above out-specify the plain reset, so repeat them. */
@media (max-width: 991px) {
    .nc-stack-panel,
    .nc-stack-panel:last-child {
        position: static;
        min-height: 0;
        overflow: visible;
    }
    .nc-stack-panel > .nc-wrap,
    .nc-stack-panel:last-child > .nc-wrap {
        position: static;
        min-height: 0;
        display: block;
        padding-top: 90px;
        padding-bottom: 90px;
    }

    .nc-orch-grid { grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   SCROLL REVEAL (applied via IntersectionObserver -> .is-inview)
   ========================================================================== */

.nc-reveal {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.nc-reveal.is-inview { opacity: 1; transform: translateY(0); }

.nc-stagger > * {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.nc-stagger.is-inview > * { opacity: 1; transform: translateY(0); }
.nc-stagger.is-inview > *:nth-child(1) { transition-delay: 0.00s; }
.nc-stagger.is-inview > *:nth-child(2) { transition-delay: 0.06s; }
.nc-stagger.is-inview > *:nth-child(3) { transition-delay: 0.12s; }
.nc-stagger.is-inview > *:nth-child(4) { transition-delay: 0.18s; }
.nc-stagger.is-inview > *:nth-child(5) { transition-delay: 0.24s; }
.nc-stagger.is-inview > *:nth-child(6) { transition-delay: 0.30s; }
.nc-stagger.is-inview > *:nth-child(7) { transition-delay: 0.36s; }
.nc-stagger.is-inview > *:nth-child(8) { transition-delay: 0.42s; }
.nc-stagger.is-inview > *:nth-child(9) { transition-delay: 0.48s; }
.nc-stagger.is-inview > *:nth-child(10) { transition-delay: 0.54s; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 991px) {
    .nc-orch-grid,
    .nc-config,
    .nc-manifesto-grid { gap: 20px; }

    .nc-manifesto-visual { order: -1; }
    .nc-section { padding: 90px 0; }

    /* render sits below the copy and overlaps down into the Benefits section */
    .nc-orch-visual {
        order: 2;
        position: relative;
        z-index: 3;
        margin-bottom: -120px;
    }
    /* drop the orch panel's bottom padding so the overlap reaches the next panel */
    .nc-stack-panel:first-of-type > .nc-wrap { padding-bottom: 0; }
}

/* Lead: stack + show the whole product on phones held upright; keep the
   desktop bleed in landscape where there's more horizontal room. */
@media (max-width: 991px) and (orientation: portrait) {
    .nc-lead .nc-lead-grid { grid-template-columns: 1fr; gap: 36px; }
    .nc-lead-visual {
        min-height: 0;
        display: flex;
        justify-content: center;
    }
    /* drop the bleed/clip — plain stacked rows, whole product visible */
    .nc-lead-render {
        position: static;
        transform: none;
        left: auto;
        width: 100%;
        max-width: 560px;
    }
}

@media (max-width: 767px) {
    .nc-page { --nc-pad: 24px; }

    .nc-hero { padding: 80px 24px 90px; }
    .nc-hero-render { width: 92vw; }
    .nc-hero-inner { gap: 20px; }

    .nc-section { padding: 72px 0; }
    .nc-section-head { margin-bottom: 30px; }

    .nc-specs-grid { grid-template-columns: 1fr 1fr; }
    .nc-suited-pill { width: 100%; justify-content: center; }
    .nc-variants-table { display: block; overflow-x: auto; white-space: nowrap; }

    .nc-scroll-cue { display: none; }

    .nc-config { grid-template-columns: 1fr; gap: 40px }
    }

@media (max-width: 479px) {
    .nc-specs-grid { grid-template-columns: 1fr; }
    .nc-result-part { font-size: 24px; }
}

/* Mobile landscape: keep hero from overflowing on short viewports */
@media (max-height: 560px) and (orientation: landscape) {
    .nc-hero { min-height: auto; padding: 110px 40px 60px; }
    .nc-hero-render { width: min(48vw, 380px); }
    .nc-hero h1 { font-size: clamp(24px, 4vw, 34px); }
    .nc-scroll-cue { display: none; }
    .nc-orch-grid {    grid-template-columns: 1.25fr .75fr; }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .nc-hero-logo-wrap, .nc-hero-eyebrow, .nc-hero h1, .nc-hero-cta,
    .nc-hero-render {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .nc-reveal, .nc-stagger > * { opacity: 1 !important; transform: none !important; }
    /* keep the glow centered, just skip the scale-in animation */
    .nc-hero-glow { animation: none !important; transform: translate(-50%, -50%) scale(1) !important; }
    .nc-kinetic .nc-line > span { transform: none !important; }
}