/* ============================================================================
 * nx-product-landing.css — "big-app showcase" layout for the three Nexlla
 * product landing pages (Website Dashboard · Marketing Suite · Customer Portal).
 * ----------------------------------------------------------------------------
 * Concept (v4): centered cinematic hero dominated by ONE large live product
 * window → bento grid where EVERY function is a glowing interactive tile →
 * three signature spotlight panels with the business case → a clean
 * "every function, explained" spec sheet → MCP wire section → FAQ → CTA.
 *
 * Accent flows from --sol-tint (each page sets the product gold #d6b37f).
 * Mock windows/cards come from nx-katalyst-mock.css; simulations from
 * nx-product.js. Reduced-motion safe throughout. No ad- prefix anywhere.
 * ==========================================================================*/

/* ════════════════════════════ HERO ═══════════════════════════════════════ */
.p4-hero { position:relative; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; overflow:hidden; isolation:isolate; }
.p4-hero__bg {
    position:absolute; inset:0; z-index:0;
    background:
        radial-gradient(1100px 560px at 50% -12%, color-mix(in srgb, var(--sol-tint) 18%, transparent), transparent 64%),
        radial-gradient(800px 520px at 88% 100%, color-mix(in srgb, var(--sol-tint) 8%, transparent), transparent 60%),
        linear-gradient(180deg, #0A0908, #000);
}
.p4-hero__grid {
    position:absolute; inset:0; z-index:0; pointer-events:none;
    background-image:linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size:64px 64px;
    -webkit-mask-image:radial-gradient(80% 70% at 50% 30%, #000, transparent 85%);
    mask-image:radial-gradient(80% 70% at 50% 30%, #000, transparent 85%);
}
.p4-hero__aurora { position:absolute; z-index:0; width:52vw; height:52vw; max-width:860px; max-height:860px; border-radius:50%; filter:blur(90px); opacity:.15; pointer-events:none; background:radial-gradient(circle at 50% 50%, var(--sol-tint), transparent 65%); }
.p4-hero__aurora--a { top:-24%; left:-12%; animation:p4Aur 17s ease-in-out infinite alternate; }
.p4-hero__aurora--b { top:-10%; right:-16%; opacity:.11; animation:p4Aur 21s ease-in-out infinite alternate-reverse; }
@keyframes p4Aur { from { transform:translate3d(0,0,0) scale(1); } to { transform:translate3d(3vw,4vh,0) scale(1.1); } }

.p4-hero__inner { position:relative; z-index:1; width:min(980px,92vw); margin:0 auto; text-align:center; padding:clamp(112px,15vh,168px) 0 clamp(26px,4vh,44px); }
.p4-hero__eyebrow {
    display:inline-flex; align-items:center; gap:10px; padding:9px 18px; border-radius:var(--nx-radius-full);
    border:1px solid color-mix(in srgb, var(--sol-tint) 35%, var(--nx-color-line)); background:color-mix(in srgb, var(--sol-tint) 7%, transparent);
    font-family:var(--nx-font-mono); font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--nx-color-text-muted); margin:0 0 26px;
}
.p4-hero__dot { width:7px; height:7px; border-radius:50%; background:var(--sol-tint); box-shadow:0 0 0 5px color-mix(in srgb, var(--sol-tint) 22%, transparent); animation:p4Pulse 2.4s ease-in-out infinite; }
@keyframes p4Pulse { 50% { box-shadow:0 0 0 9px transparent; } }

.p4-hero__title { font-family:var(--nx-font-display); font-weight:700; font-size:clamp(2.7rem,6vw,5rem); line-height:1.02; letter-spacing:-.03em; color:var(--nx-color-text); margin:0 0 22px; }
.p4-hero__title .w { display:inline-block; opacity:0; transform:translateY(28px) rotate(1.5deg); transition:opacity .7s var(--nx-ease-out), transform .7s var(--nx-ease-out); transition-delay:calc(var(--i) * 75ms); }
.nx-sol-reveal.is-in .p4-hero__title .w { opacity:1; transform:none; }
.p4-hero__title em { font-family:var(--nx-font-serif); font-style:italic; font-weight:400; color:var(--sol-tint); letter-spacing:-.01em; }
.p4-hero__lede { color:var(--nx-color-text-muted); font-size:var(--nx-text-md); line-height:1.68; max-width:66ch; margin:0 auto 30px; }

.p4-btn {
    display:inline-flex; align-items:center; gap:10px; padding:16px 30px; border-radius:var(--nx-radius-full);
    font-family:var(--nx-font-display); font-weight:700; font-size:15px; text-decoration:none; line-height:1;
    transition:transform .2s var(--nx-ease-out), box-shadow .3s, background .25s, border-color .25s, color .25s; will-change:transform;
}
.p4-btn--gold { background:var(--sol-tint); color:#1a1408; box-shadow:0 14px 40px -14px color-mix(in srgb, var(--sol-tint) 65%, transparent); }
.p4-btn--gold:hover { box-shadow:0 20px 54px -14px color-mix(in srgb, var(--sol-tint) 80%, transparent); }
.p4-btn--ghost { border:1px solid var(--nx-color-line-strong); color:var(--nx-color-text); background:var(--nx-glass-bg); }
.p4-btn--ghost:hover { border-color:var(--sol-tint); color:var(--sol-tint); }
.p4-btn i { font-style:normal; transition:transform .25s var(--nx-ease-out); }
.p4-btn:hover i { transform:translateY(3px); }
.p4-hero__cta { display:flex; justify-content:center; flex-wrap:wrap; gap:14px; margin:0 0 26px; }

.p4-hero__proof { display:flex; justify-content:center; flex-wrap:wrap; gap:9px; }
.p4-hero__proof span { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--nx-color-text-muted); border:1px solid var(--nx-color-line); background:var(--nx-glass-bg); border-radius:var(--nx-radius-full); padding:8px 14px; }
.p4-hero__proof b { color:var(--sol-tint); font-weight:700; }

/* The big app shot */
.p4-hero__shot { position:relative; z-index:1; width:min(1060px,94vw); margin:clamp(28px,5vh,52px) auto 0; perspective:1600px; }
.p4-hero__glow { position:absolute; inset:-8% -6% auto; height:70%; z-index:-1; border-radius:50%; filter:blur(70px); opacity:.28; background:radial-gradient(closest-side, var(--sol-tint), transparent 70%); pointer-events:none; }
.p4-hero__shot .kt-win { box-shadow:0 60px 140px -50px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.04); }
.p4-float--a { animation:p4Float 6s ease-in-out infinite alternate; }
.p4-float--b { animation:p4Float 7.2s ease-in-out infinite alternate-reverse; }
@keyframes p4Float { from { transform:translateY(0); } to { transform:translateY(-9px); } }

.p4-hero__foot { position:relative; z-index:1; margin-top:auto; padding-top:clamp(22px,4vh,40px); }
.p4-marquee { border-top:1px solid var(--nx-color-line); padding:15px 0; overflow:hidden; }
.p4-marquee__track { display:inline-flex; white-space:nowrap; animation:p4Marq 34s linear infinite; will-change:transform; }
.p4-marquee:hover .p4-marquee__track { animation-play-state:paused; }
@keyframes p4Marq { to { transform:translateX(-50%); } }
.p4-marquee__track > span { display:inline-flex; align-items:center; }
.p4-marquee em { font-style:normal; font-family:var(--nx-font-mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--nx-color-text-dim); padding:0 18px; }
.p4-marquee b { color:var(--sol-tint); font-weight:400; }

@media (prefers-reduced-motion:reduce) {
    .p4-hero__aurora, .p4-hero__dot, .p4-float--a, .p4-float--b { animation:none; }
    .p4-marquee__track { animation:none; }
    .p4-hero__title .w { opacity:1; transform:none; transition:none; }
}

/* The site statband pulls itself up with a negative margin (hero-overlap on
   the solution pages) — after the showcase hero's marquee it must sit clear. */
.p4-hero + .nx-aud-statband { margin-top:clamp(34px,5.5vh,54px); }

/* ════════════════════════════ SECTION SHELL ══════════════════════════════ */
.p4-secpad { padding:clamp(64px,10vh,124px) 0; }
.p4-head { width:min(860px,92vw); margin:0 auto clamp(34px,5vh,56px); text-align:center; }
.p4-head__eyebrow { font-family:var(--nx-font-mono); font-size:12px; letter-spacing:.26em; text-transform:uppercase; color:var(--sol-tint); }
.p4-head__title { font-family:var(--nx-font-display); font-weight:700; font-size:clamp(1.9rem,4vw,3.1rem); line-height:1.06; letter-spacing:-.02em; margin:14px 0 14px; color:var(--nx-color-text); }
.p4-head__title em { font-family:var(--nx-font-serif); font-style:italic; font-weight:400; color:var(--sol-tint); }
.p4-head__lede { color:var(--nx-color-text-muted); font-size:var(--nx-text-md); line-height:1.66; margin:0; }

/* ════════════════════════════ BENTO GRID ═════════════════════════════════ */
.p4-bento { width:min(1240px,94vw); margin:0 auto; display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.p4-tile {
    position:relative; display:flex; flex-direction:column; gap:11px; overflow:hidden;
    border-radius:20px; border:1px solid var(--nx-color-line); padding:clamp(16px,1.8vw,22px);
    background:linear-gradient(165deg, #12100E, #0B0A09);
    transition:transform .25s var(--nx-ease-out), border-color .25s;
}
.p4-tile::after {
    content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s;
    background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb, var(--sol-tint) 11%, transparent), transparent 62%);
}
.p4-tile:hover { transform:translateY(-4px); border-color:color-mix(in srgb, var(--sol-tint) 45%, var(--nx-color-line)); }
.p4-tile:hover::after { opacity:1; }
.p4-tile__k { font-family:var(--nx-font-mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--sol-tint); }
.p4-tile__t { font-family:var(--nx-font-display); font-weight:700; font-size:17px; color:var(--nx-color-text); margin:0; }
.p4-tile__d { font-size:13px; line-height:1.55; color:var(--nx-color-text-muted); margin:0; }
.p4-tile__viz { position:relative; z-index:1; margin-top:auto; display:flex; flex-direction:column; gap:8px; }
.p4-tile--w2 { grid-column:span 2; }
.p4-tile--w3 { grid-column:span 3; }
.p4-tile--w4 { grid-column:span 4; }
.p4-tile--h2 { grid-row:span 2; }
@media (max-width:980px) {
    .p4-bento { grid-template-columns:1fr 1fr; }
    .p4-tile--w2, .p4-tile--w3, .p4-tile--w4 { grid-column:span 2; }
}

/* ════════════════════════════ SPOTLIGHT PANELS ═══════════════════════════ */
.p4-spot {
    position:relative; width:min(1240px,94vw); margin:0 auto clamp(22px,3.4vh,34px); overflow:hidden;
    border-radius:28px; border:1px solid var(--nx-color-line);
    background:
        radial-gradient(720px 420px at 12% -10%, color-mix(in srgb, var(--sol-tint) 9%, transparent), transparent 62%),
        linear-gradient(165deg, #12100E, #0A0908);
    padding:clamp(26px,4.2vw,58px);
    display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,64px); align-items:center;
}
.p4-spot--flip { background:
        radial-gradient(720px 420px at 88% -10%, color-mix(in srgb, var(--sol-tint) 9%, transparent), transparent 62%),
        linear-gradient(195deg, #12100E, #0A0908); }
.p4-spot--flip .p4-spot__viz { order:-1; }
.p4-spot__no { font-family:var(--nx-font-mono); font-size:12.5px; letter-spacing:.2em; color:var(--sol-tint); }
.p4-spot__eyebrow { display:block; font-family:var(--nx-font-mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--nx-color-text-dim); margin-top:7px; }
.p4-spot__title { font-family:var(--nx-font-display); font-weight:700; font-size:clamp(1.65rem,3.1vw,2.5rem); line-height:1.08; letter-spacing:-.02em; margin:13px 0 14px; color:var(--nx-color-text); }
.p4-spot__title em { font-family:var(--nx-font-serif); font-style:italic; font-weight:400; color:var(--sol-tint); }
.p4-spot__lead { color:var(--nx-color-text-muted); font-size:var(--nx-text-md); line-height:1.66; margin:0 0 18px; }
.p4-feats { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px; }
.p4-feats span { font-size:12px; color:var(--nx-color-text-muted); border:1px solid var(--nx-color-line); border-radius:var(--nx-radius-full); padding:6px 12px; background:var(--nx-glass-bg); transition:border-color .25s, color .25s; }
.p4-feats span:hover { border-color:var(--sol-tint); color:var(--nx-color-text); }
.p4-spot__viz { perspective:1400px; }
@media (max-width:920px) {
    .p4-spot { grid-template-columns:1fr; gap:24px; }
    .p4-spot--flip .p4-spot__viz { order:0; }
}

/* Business-case callout (shared by spotlights) */
.p4-why { border:1px solid color-mix(in srgb, var(--sol-tint) 28%, var(--nx-color-line)); border-radius:var(--nx-radius-lg); background:color-mix(in srgb, var(--sol-tint) 6%, transparent); padding:clamp(16px,1.8vw,22px); }
.p4-why__t { display:flex; align-items:center; gap:9px; font-family:var(--nx-font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--sol-tint); margin:0 0 13px; }
.p4-why__t::before { content:""; width:20px; height:1px; background:var(--sol-tint); }
.p4-why ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.p4-why li { position:relative; padding-left:29px; color:var(--nx-color-text-muted); font-size:var(--nx-text-sm); line-height:1.55; }
.p4-why li::before { content:"✓"; position:absolute; left:0; top:-1px; width:18px; height:18px; border-radius:50%; background:color-mix(in srgb, var(--sol-tint) 20%, transparent); color:var(--sol-tint); font-size:11px; font-weight:700; display:grid; place-items:center; }
.p4-why li b { color:var(--nx-color-text); font-weight:600; }

/* ════════════════════════════ SPEC SHEET ═════════════════════════════════ */
.p4-spec { width:min(1080px,92vw); margin:0 auto; border-top:1px solid var(--nx-color-line); }
.p4-spec__row { display:grid; grid-template-columns:250px 1fr; gap:clamp(16px,3vw,40px); padding:clamp(18px,2.4vh,26px) 10px; border-bottom:1px solid var(--nx-color-line); transition:background .25s; }
.p4-spec__row:hover { background:color-mix(in srgb, var(--sol-tint) 4%, transparent); }
.p4-spec__name { font-family:var(--nx-font-display); font-weight:700; font-size:16.5px; color:var(--nx-color-text); line-height:1.3; }
.p4-spec__name i { display:block; font-style:normal; font-family:var(--nx-font-mono); font-size:10.5px; letter-spacing:.18em; color:var(--sol-tint); margin-bottom:6px; }
.p4-spec__what { margin:0 0 7px; font-size:13.5px; line-height:1.6; color:var(--nx-color-text-muted); }
.p4-spec__why { margin:0; font-size:13.5px; line-height:1.6; color:var(--nx-color-text-muted); }
.p4-spec__why b { color:var(--sol-tint); font-weight:600; }
@media (max-width:760px) { .p4-spec__row { grid-template-columns:1fr; gap:8px; } }

/* ════════════════════════════ MCP SECTION ════════════════════════════════ */
.p4-mcp { position:relative; width:min(1240px,94vw); margin:0 auto; overflow:hidden; border-radius:28px; border:1px solid color-mix(in srgb, var(--sol-tint) 24%, var(--nx-color-line)); }
.p4-mcp__bg { position:absolute; inset:0; z-index:0; opacity:.55; pointer-events:none; }
.p4-mcp__glow { position:absolute; inset:0; z-index:0; background:radial-gradient(62% 62% at 50% 8%, color-mix(in srgb, var(--sol-tint) 15%, transparent), transparent 70%); pointer-events:none; }
.p4-mcp__wrap { position:relative; z-index:1; width:min(980px,90%); margin:0 auto; padding:clamp(54px,8vh,96px) 0; text-align:center; }
.p4-mcp__wrap .p4-head { margin-bottom:34px; }
.p4-wire { display:flex; align-items:center; justify-content:center; gap:clamp(10px,2.4vw,34px); flex-wrap:wrap; margin-bottom:24px; }
.p4-wire__clients { display:flex; flex-direction:column; gap:14px; }
.p4-node { display:flex; flex-direction:column; align-items:center; gap:9px; }
.p4-node__badge { width:72px; height:72px; border-radius:20px; display:grid; place-items:center; font-size:24px; color:var(--nx-color-text); border:1px solid var(--nx-color-line-strong); background:var(--nx-color-surface); box-shadow:0 20px 44px -30px rgba(0,0,0,.8); transition:transform .25s var(--nx-ease-out), border-color .25s; }
.p4-node:hover .p4-node__badge { transform:translateY(-4px); border-color:var(--sol-tint); }
.p4-node__l { font-size:12px; color:var(--nx-color-text-muted); }
.p4-hub { width:100px; height:100px; border-radius:26px; display:grid; place-items:center; background:color-mix(in srgb, var(--sol-tint) 16%, transparent); border:1px solid var(--sol-tint); color:var(--sol-tint); font-family:var(--nx-font-mono); font-weight:700; font-size:15px; letter-spacing:.08em; box-shadow:0 0 0 6px color-mix(in srgb, var(--sol-tint) 10%, transparent); }
.p4-link { width:clamp(28px,6vw,84px); height:2px; background:linear-gradient(90deg, transparent, var(--sol-tint), transparent); position:relative; border-radius:2px; }
.p4-link::after { content:""; position:absolute; top:50%; left:0; width:7px; height:7px; border-radius:50%; background:var(--sol-tint); transform:translateY(-50%); box-shadow:0 0 8px var(--sol-tint); animation:p4Flow 2.4s linear infinite; }
.p4-link--b::after { animation-delay:1.2s; }
@keyframes p4Flow { 0% { left:0; opacity:0; } 12% { opacity:1; } 88% { opacity:1; } 100% { left:100%; opacity:0; } }
@media (max-width:620px) { .p4-wire { flex-direction:column; } .p4-link { width:2px; height:26px; background:linear-gradient(180deg, transparent, var(--sol-tint), transparent); } .p4-link::after { animation:none; } }
@media (prefers-reduced-motion:reduce) { .p4-link::after { animation:none; } }

.p4-ticker { min-height:22px; margin:0 auto 36px; font-family:var(--nx-font-mono); font-size:12.5px; letter-spacing:.02em; color:var(--nx-color-text-muted); cursor:pointer; }
.p4-ticker > span { display:none; align-items:center; justify-content:center; gap:8px; }
.p4-ticker > :first-child { display:inline-flex; }
.p4-ticker > [data-nx-t].is-play { display:inline-flex; }
.p4-ticker:has(> .is-play) > :first-child:not(.is-play) { display:none; }
.p4-ticker b { color:var(--sol-tint); font-weight:500; }
.p4-ticker em { font-style:normal; color:#4ade80; }

.p4-mcp__points { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,22px); text-align:left; }
@media (max-width:760px) { .p4-mcp__points { grid-template-columns:1fr; } }
.p4-point { border:1px solid var(--nx-color-line); border-radius:var(--nx-radius-lg); background:rgba(10,9,8,.55); backdrop-filter:blur(6px); padding:22px; transition:border-color .25s, transform .2s; }
.p4-point:hover { border-color:var(--sol-tint); transform:translateY(-3px); }
.p4-point__k { font-family:var(--nx-font-mono); font-size:11px; letter-spacing:.16em; color:var(--sol-tint); }
.p4-point__t { font-family:var(--nx-font-display); font-weight:700; color:var(--nx-color-text); margin:10px 0 8px; font-size:var(--nx-text-md); }
.p4-point__b { color:var(--nx-color-text-muted); font-size:var(--nx-text-sm); line-height:1.6; margin:0; }

/* ════════════════════════════ FINAL CTA ══════════════════════════════════ */
.p4-cta { width:min(1240px,94vw); margin:0 auto; }
.p4-cta__panel {
    position:relative; overflow:hidden; text-align:center; border-radius:30px;
    border:1px solid color-mix(in srgb, var(--sol-tint) 30%, var(--nx-color-line));
    background:
        radial-gradient(900px 460px at 50% -20%, color-mix(in srgb, var(--sol-tint) 20%, transparent), transparent 68%),
        linear-gradient(180deg, #12100E, #0A0908);
    padding:clamp(56px,9vh,110px) clamp(22px,6vw,80px);
}
.p4-cta__title { font-family:var(--nx-font-display); font-weight:700; font-size:clamp(2.1rem,4.6vw,3.5rem); line-height:1.04; letter-spacing:-.025em; color:var(--nx-color-text); margin:0 0 16px; }
.p4-cta__title em { font-family:var(--nx-font-serif); font-style:italic; font-weight:400; color:var(--sol-tint); }
.p4-cta__lede { color:var(--nx-color-text-muted); font-size:var(--nx-text-md); line-height:1.66; max-width:64ch; margin:0 auto 30px; }
.p4-cta__btns { display:flex; justify-content:center; flex-wrap:wrap; gap:14px; }