/* ============================================================================
 * nx-product-tour.css — immersive "feature tour" layout for the three Nexlla
 * product landing pages (Website Dashboard · Marketing Suite · Customer Portal).
 * ----------------------------------------------------------------------------
 * v2 — next-level treatment:
 *   · pt-hero: full-first-screen cinematic hero (100svh) with WebGL layer,
 *     aurora, grid, word-staggered headline, magnetic gold CTAs, live product
 *     window, floating chips, function marquee and scroll cue.
 *   · pt-rail: fixed scrollspy rail highlighting the current function act.
 *   · pt-act: full-width act per function — sticky live visual + copy with a
 *     giant outlined watermark numeral, staggered feature chips and a
 *     "why your business needs it" callout whose points cascade in.
 *   · pt-mcp: hero-scale MCP band with animated wire diagram + tool-call ticker.
 *
 * Accent flows from --sol-tint (each page sets the product gold #d6b37f).
 * Reduced-motion safe throughout. No ad- prefix anywhere.
 * ==========================================================================*/

/* ════════════════════════════ FULL-SCREEN HERO ═══════════════════════════ */
.pt-hero { position:relative; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; overflow:hidden; isolation:isolate; }
.pt-hero__bg {
    position:absolute; inset:0; z-index:0;
    background:
        radial-gradient(1200px 660px at 76% -10%, color-mix(in srgb, var(--sol-tint) 17%, transparent), transparent 62%),
        radial-gradient(900px 600px at 6% 110%, color-mix(in srgb, var(--sol-tint) 9%, transparent), transparent 62%),
        linear-gradient(180deg, #0A0908, #000);
}
.pt-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(75% 75% at 62% 40%, #000, transparent 84%);
    mask-image:radial-gradient(75% 75% at 62% 40%, #000, transparent 84%);
}
.pt-hero__aurora { position:absolute; z-index:0; width:56vw; height:56vw; max-width:900px; max-height:900px; border-radius:50%; filter:blur(90px); opacity:.16; pointer-events:none; background:radial-gradient(circle at 50% 50%, var(--sol-tint), transparent 65%); }
.pt-hero__aurora--a { top:-22%; right:-14%; animation:ptAur 16s ease-in-out infinite alternate; }
.pt-hero__aurora--b { bottom:-30%; left:-16%; opacity:.10; animation:ptAur 20s ease-in-out infinite alternate-reverse; }
@keyframes ptAur { from { transform:translate3d(0,0,0) scale(1); } to { transform:translate3d(4vw,3vh,0) scale(1.12); } }

.pt-hero__inner {
    position:relative; z-index:1; width:min(1240px,92vw); margin:auto;
    display:grid; grid-template-columns:1.04fr .96fr; gap:clamp(30px,4.5vw,70px); align-items:center;
    padding:clamp(110px,15vh,170px) 0 clamp(24px,4vh,44px);
}
.pt-hero__eyebrow { display:flex; align-items:center; gap:10px; font-family:var(--nx-font-mono); font-size:12px; letter-spacing:.26em; text-transform:uppercase; color:var(--nx-color-text-muted); margin:0 0 20px; }
.pt-hero__dot { width:8px; height:8px; border-radius:50%; background:var(--sol-tint); box-shadow:0 0 0 5px color-mix(in srgb, var(--sol-tint) 22%, transparent); animation:ptPulse 2.4s ease-in-out infinite; }
@keyframes ptPulse { 50% { box-shadow:0 0 0 9px transparent; } }

.pt-hero__title { font-family:var(--nx-font-display); font-weight:700; font-size:clamp(2.5rem,5.1vw,4.35rem); line-height:1.03; letter-spacing:-.028em; color:var(--nx-color-text); margin:0 0 22px; }
.pt-hero__title .w { display:inline-block; opacity:0; transform:translateY(26px) rotate(1.5deg); transition:opacity .7s var(--nx-ease-out), transform .7s var(--nx-ease-out); transition-delay:calc(var(--i) * 70ms); }
.nx-sol-reveal.is-in .pt-hero__title .w { opacity:1; transform:none; }
.pt-hero__title em { font-family:var(--nx-font-serif); font-style:italic; font-weight:400; color:var(--sol-tint); letter-spacing:-.01em; }

.pt-hero__lede { color:var(--nx-color-text-muted); font-size:var(--nx-text-md); line-height:1.68; max-width:56ch; margin:0 0 30px; }

.pt-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;
}
.pt-btn--gold { background:var(--sol-tint); color:#1a1408; box-shadow:0 14px 40px -14px color-mix(in srgb, var(--sol-tint) 65%, transparent); }
.pt-btn--gold:hover { box-shadow:0 20px 54px -14px color-mix(in srgb, var(--sol-tint) 80%, transparent); }
.pt-btn--ghost { border:1px solid var(--nx-color-line-strong); color:var(--nx-color-text); background:var(--nx-glass-bg); }
.pt-btn--ghost:hover { border-color:var(--sol-tint); color:var(--sol-tint); }
.pt-btn i { font-style:normal; transition:transform .25s var(--nx-ease-out); }
.pt-btn:hover i { transform:translateY(3px); }
.pt-hero__cta { display:flex; flex-wrap:wrap; gap:14px; margin:0 0 30px; }

.pt-hero__proof { display:flex; flex-wrap:wrap; gap:9px; }
.pt-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; }
.pt-hero__proof b { color:var(--sol-tint); font-weight:700; }

.pt-hero__stage { position:relative; perspective:1400px; }
.pt-chipfloat--a { animation:ptFloat 6s ease-in-out infinite alternate; }
.pt-chipfloat--b { animation:ptFloat 7s ease-in-out infinite alternate-reverse; }
@keyframes ptFloat { from { transform:translateY(0); } to { transform:translateY(-9px); } }

/* Hero footer: function marquee + scroll cue */
.pt-hero__foot { position:relative; z-index:1; margin-top:auto; }
.pt-hero__cue {
    display:grid; place-items:center; width:42px; height:42px; margin:0 auto 16px; border-radius:50%;
    border:1px solid var(--nx-color-line-strong); color:var(--nx-color-text-dim); text-decoration:none; font-size:16px;
    transition:border-color .25s, color .25s;
}
.pt-hero__cue:hover { border-color:var(--sol-tint); color:var(--sol-tint); }
.pt-hero__cue i { font-style:normal; animation:ptCue 1.8s ease-in-out infinite; }
@keyframes ptCue { 50% { transform:translateY(4px); } }
.pt-marquee { border-top:1px solid var(--nx-color-line); padding:15px 0; overflow:hidden; }
.pt-marquee__track { display:inline-flex; white-space:nowrap; animation:ptMarq 34s linear infinite; will-change:transform; }
.pt-marquee:hover .pt-marquee__track { animation-play-state:paused; }
@keyframes ptMarq { to { transform:translateX(-50%); } }
.pt-marquee__track > span { display:inline-flex; align-items:center; }
.pt-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; }
.pt-marquee b { color:var(--sol-tint); font-weight:400; }

@media (max-width:980px) {
    .pt-hero__inner { grid-template-columns:1fr; padding-top:120px; gap:38px; }
    .pt-hero__stage { max-width:560px; }
}
@media (prefers-reduced-motion:reduce) {
    .pt-hero__aurora, .pt-hero__dot, .pt-hero__cue i, .pt-chipfloat--a, .pt-chipfloat--b { animation:none; }
    .pt-marquee__track { animation:none; }
    .pt-hero__title .w { opacity:1; transform:none; transition:none; }
}

/* ════════════════════════════ SCROLLSPY RAIL ═════════════════════════════ */
.pt-rail { position:fixed; right:22px; top:50%; transform:translateY(-50%); z-index:60; display:flex; flex-direction:column; gap:11px; }
.pt-rail a { display:flex; align-items:center; justify-content:flex-end; gap:9px; text-decoration:none; color:var(--nx-color-text-dim); font-family:var(--nx-font-mono); font-size:10.5px; letter-spacing:.08em; }
.pt-rail a i { order:2; width:8px; height:8px; border-radius:50%; border:1px solid currentColor; background:transparent; transition:background .25s, transform .25s; flex:none; }
.pt-rail a span { order:1; max-width:0; overflow:hidden; white-space:nowrap; opacity:0; transition:max-width .35s var(--nx-ease-out), opacity .3s; }
.pt-rail a:hover span, .pt-rail a.is-cur span { max-width:170px; opacity:1; }
.pt-rail a.is-cur { color:var(--sol-tint); }
.pt-rail a.is-cur i { background:var(--sol-tint); transform:scale(1.25); }
@media (max-width:1279px) { .pt-rail { display:none; } }

/* ════════════════════════════ JUMP INDEX ═════════════════════════════════ */
.pt-index { width:min(1200px,92vw); margin:0 auto; display:flex; flex-wrap:wrap; gap:8px; padding:clamp(30px,5vw,54px) 0 clamp(6px,1vw,10px); }
.pt-index__l { width:100%; font-family:var(--nx-font-mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--nx-color-text-dim); margin-bottom:6px; }
.pt-index a { font-size:12.5px; color:var(--nx-color-text-muted); border:1px solid var(--nx-color-line); border-radius:var(--nx-radius-full); padding:7px 13px; text-decoration:none; transition:border-color .2s, color .2s, background .2s, transform .15s; }
.pt-index a:hover { border-color:var(--sol-tint); color:var(--nx-color-text); background:color-mix(in srgb, var(--sol-tint) 10%, transparent); transform:translateY(-2px); }

/* ════════════════════════════ FUNCTION ACTS ══════════════════════════════ */
.pt-act { position:relative; overflow:hidden; }
.pt-act__wm {
    position:absolute; top:clamp(20px,4vh,44px); right:1vw; z-index:0; pointer-events:none; user-select:none;
    font-family:var(--nx-font-display); font-weight:800; font-size:clamp(6.5rem,15vw,14rem); line-height:.9; letter-spacing:-.04em;
    color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.055);
}
.pt-act--flip .pt-act__wm { right:auto; left:1vw; }
.pt-act__wrap {
    position:relative; z-index:1; width:min(1200px,92vw); margin:0 auto;
    display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,84px); align-items:start;
    padding:clamp(64px,10vh,128px) 0; border-top:1px solid var(--nx-color-line);
}
.pt-visual { position:sticky; top:14vh; }
.pt-act--flip .pt-visual { order:2; }
.pt-copy { padding-top:4px; }
.pt-act__no { font-family:var(--nx-font-mono); font-size:13px; letter-spacing:.2em; color:var(--sol-tint); }
.pt-act__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; }
.pt-act__title { font-family:var(--nx-font-display); font-weight:700; font-size:clamp(1.75rem,3.4vw,2.75rem); line-height:1.07; letter-spacing:-.02em; margin:14px 0 16px; color:var(--nx-color-text); }
.pt-act__title em { font-family:var(--nx-font-serif); font-style:italic; font-weight:400; color:var(--sol-tint); }
.pt-act__lead { color:var(--nx-color-text-muted); font-size:var(--nx-text-md); line-height:1.66; margin:0 0 20px; }

.pt-feats { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; }
.pt-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);
    opacity:0; transform:translateY(10px);
    transition:opacity .5s var(--nx-ease-out), transform .5s var(--nx-ease-out), border-color .25s, color .25s;
}
.pt-copy.nx-sol-reveal.is-in .pt-feats span { opacity:1; transform:none; }
.pt-feats span:nth-child(1) { transition-delay:.05s; } .pt-feats span:nth-child(2) { transition-delay:.12s; }
.pt-feats span:nth-child(3) { transition-delay:.19s; } .pt-feats span:nth-child(4) { transition-delay:.26s; }
.pt-feats span:nth-child(5) { transition-delay:.33s; } .pt-feats span:nth-child(6) { transition-delay:.40s; }
.pt-feats span:hover { border-color:var(--sol-tint); color:var(--nx-color-text); }

.pt-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(18px,2vw,24px); }
.pt-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 15px; }
.pt-why__t::before { content:""; width:20px; height:1px; background:var(--sol-tint); }
.pt-why ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; }
.pt-why li {
    position:relative; padding-left:29px; color:var(--nx-color-text-muted); font-size:var(--nx-text-sm); line-height:1.55;
    opacity:0; transform:translateX(-12px);
    transition:opacity .55s var(--nx-ease-out), transform .55s var(--nx-ease-out);
}
.pt-copy.nx-sol-reveal.is-in .pt-why li { opacity:1; transform:none; }
.pt-why li:nth-child(1) { transition-delay:.25s; } .pt-why li:nth-child(2) { transition-delay:.4s; } .pt-why li:nth-child(3) { transition-delay:.55s; }
.pt-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; }
.pt-why li b { color:var(--nx-color-text); font-weight:600; }

@media (max-width:900px) {
    .pt-act__wrap { grid-template-columns:1fr; gap:26px; }
    .pt-visual { position:static; order:0 !important; }
    .pt-act__wm { font-size:6rem; }
}
@media (prefers-reduced-motion:reduce) {
    .pt-feats span, .pt-why li { opacity:1; transform:none; transition:none; }
}

/* ════════════════════════════ MCP ACT ════════════════════════════════════ */
.pt-mcp { position:relative; overflow:hidden; border-top:1px solid var(--nx-color-line); }
.pt-mcp__bg { position:absolute; inset:0; z-index:0; opacity:.6; pointer-events:none; }
.pt-mcp__glow { position:absolute; inset:0; z-index:0; background:radial-gradient(60% 60% at 50% 12%, color-mix(in srgb, var(--sol-tint) 16%, transparent), transparent 70%); pointer-events:none; }
.pt-mcp__wrap { position:relative; z-index:1; width:min(1100px,92vw); margin:0 auto; padding:clamp(70px,12vh,150px) 0; text-align:center; }
.pt-mcp__eyebrow { font-family:var(--nx-font-mono); font-size:12px; letter-spacing:.26em; text-transform:uppercase; color:var(--sol-tint); }
.pt-mcp__title { font-family:var(--nx-font-display); font-weight:700; font-size:clamp(2rem,4.6vw,3.4rem); line-height:1.05; letter-spacing:-.02em; margin:16px 0 18px; color:var(--nx-color-text); }
.pt-mcp__title em { font-family:var(--nx-font-serif); font-style:italic; font-weight:400; color:var(--sol-tint); }
.pt-mcp__lead { max-width:780px; margin:0 auto 44px; color:var(--nx-color-text-muted); font-size:var(--nx-text-md); line-height:1.7; }

.pt-wire { display:flex; align-items:center; justify-content:center; gap:clamp(10px,2.4vw,34px); flex-wrap:wrap; margin-bottom:26px; }
.pt-wire__clients { display:flex; flex-direction:column; gap:14px; }
.pt-node { display:flex; flex-direction:column; align-items:center; gap:9px; }
.pt-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; }
.pt-node:hover .pt-node__badge { transform:translateY(-4px); border-color:var(--sol-tint); }
.pt-node__l { font-size:12px; color:var(--nx-color-text-muted); }
.pt-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); }
.pt-link { width:clamp(28px,6vw,84px); height:2px; background:linear-gradient(90deg, transparent, var(--sol-tint), transparent); position:relative; border-radius:2px; }
.pt-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:ptFlow 2.4s linear infinite; }
.pt-link--b::after { animation-delay:1.2s; }
@keyframes ptFlow { 0% { left:0; opacity:0; } 12% { opacity:1; } 88% { opacity:1; } 100% { left:100%; opacity:0; } }
@media (max-width:620px) { .pt-wire { flex-direction:column; } .pt-link { width:2px; height:26px; background:linear-gradient(180deg, transparent, var(--sol-tint), transparent); } .pt-link::after { animation:none; } }
@media (prefers-reduced-motion:reduce) { .pt-link::after { animation:none; } }

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

.pt-mcp__points { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,22px); text-align:left; }
@media (max-width:760px) { .pt-mcp__points { grid-template-columns:1fr; } }
.pt-point { border:1px solid var(--nx-color-line); border-radius:var(--nx-radius-lg); background:var(--nx-color-surface); padding:22px; transition:border-color .25s, transform .2s; }
.pt-point:hover { border-color:var(--sol-tint); transform:translateY(-3px); }
.pt-point__k { font-family:var(--nx-font-mono); font-size:11px; letter-spacing:.16em; color:var(--sol-tint); }
.pt-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); }
.pt-point__b { color:var(--nx-color-text-muted); font-size:var(--nx-text-sm); line-height:1.6; margin:0; }