/*
 * NETIXER AI — cinematic homepage (front page only).
 * Motion is driven by one custom property per scene (--p, 0 → 1) written by
 * assets/js/scroll-scenes.js. Pinned sequences only run on the "normal" and
 * "high" tiers; "mobile" and "minimal" get a calm, static composition.
 */

/* ---------- Design tokens (dark system) ---------- */
.nx-cinematic {
	--c-bg: #05070d;
	--c-bg-2: #0a0e18;
	--c-bg-3: #0f1422;
	--c-fg: #f4f6fb;
	--c-fg-2: #c9cfdd;
	--c-muted: #98a1b6;
	--c-accent: #5fd4f0;
	--c-accent-2: #9b86ff;
	--c-accent-3: #3f7bff;
	--c-border: rgba(255, 255, 255, .10);
	--c-border-strong: rgba(255, 255, 255, .18);
	--c-surface: rgba(255, 255, 255, .035);
	--c-surface-2: rgba(255, 255, 255, .06);
	--c-glass: rgba(10, 14, 24, .62);
	--c-light: rgba(150, 190, 255, .22);
	--r-s: 12px;
	--r-m: 20px;
	--r-l: 28px;
	--sp-scene: clamp(96px, 14vw, 180px);
	--shadow-deep: 0 40px 120px -40px rgba(0, 0, 0, .8);
	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--ease-in-out: cubic-bezier(.65, 0, .35, 1);
	--t-fast: .2s;
	--t-med: .6s;
	--t-slow: 1.1s;
	--display: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	/* Re-point the base tokens so shared components read correctly on dark. */
	--ink: var(--c-fg);
	--slate: var(--c-fg-2);
	--muted: var(--c-muted);
	--line: var(--c-border);
	--mist: var(--c-bg-2);
	background: var(--c-bg);
	color: var(--c-fg-2);
}
.nx-cinematic .nx-main { background: var(--c-bg); }
.nx-cinematic h1, .nx-cinematic h2, .nx-cinematic h3 { color: var(--c-fg); }
.nx-cinematic a:not(.nx-btn):not(.nx-store) { color: var(--c-fg); text-decoration-color: rgba(95, 212, 240, .6); }
.nx-cinematic a:not(.nx-btn):not(.nx-store):hover { color: var(--c-accent); }
.nx-cinematic :focus-visible { outline-color: var(--c-accent); }
.nx-cinematic ::selection { background: rgba(95, 212, 240, .3); color: #fff; }

/* ---------- Header over the dark stage ---------- */
.nx-header-dark .nx-header { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; box-shadow: none; }
.nx-header-dark .nx-header.is-scrolled { background: rgba(5, 7, 13, .72); -webkit-backdrop-filter: saturate(140%) blur(16px); backdrop-filter: saturate(140%) blur(16px); border-bottom-color: var(--c-border); }
.nx-header-dark .nx-menu a { color: var(--c-fg-2); }
.nx-header-dark .nx-menu > li > a:hover { background: var(--c-surface-2); color: var(--c-fg); }
.nx-header-dark .nx-menu .current-menu-item > a { color: var(--c-fg); }
.nx-header-dark .nx-menu .sub-menu { background: var(--c-bg-3); border-color: var(--c-border); }
.nx-header-dark .nx-nav__cta { background: transparent; color: var(--c-fg); border-color: var(--c-border-strong); }
.nx-header-dark .nx-nav__cta:hover { background: var(--c-fg); color: var(--c-bg); }
.nx-header-dark .nx-menu-toggle { color: var(--c-fg); border-color: var(--c-border-strong); }
.nx-header-dark .nx-wordmark { color: var(--c-fg); }
@media (max-width: 959px) {
	.js.nx-menu-is-open .nx-header-dark .nx-header, .nx-header-dark.nx-menu-open .nx-header { background: var(--c-bg); }
	.nx-header-dark .nx-nav.is-open { background: var(--c-bg) !important; }
	.nx-header-dark .nx-nav.is-open .nx-menu > li { border-color: var(--c-border) !important; }
	.nx-header-dark .nx-nav.is-open .nx-menu a { color: var(--c-fg) !important; }
}

/* ---------- Shared type & controls ---------- */
.nx-home2 { position: relative; overflow-x: clip; }
.nx-eyebrow { margin: 0 0 20px; font-size: .78rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--c-muted); }
.nx-display { font-family: var(--display); font-size: clamp(2.6rem, 8.2vw, 7rem); font-weight: 600; line-height: .96; letter-spacing: -.035em; text-transform: uppercase; color: var(--c-fg); text-wrap: balance; margin: 0; }
.nx-display--m { font-size: clamp(2.1rem, 5.6vw, 4.6rem); }
.nx-cinematic .nx-btn--light { background: var(--c-fg); color: var(--c-bg); border-color: var(--c-fg); }
.nx-cinematic .nx-btn--light:hover { background: #fff; color: var(--c-bg); box-shadow: 0 0 0 6px rgba(255, 255, 255, .08); }
.nx-btn--outline { background: transparent; color: var(--c-fg, var(--ink)); border: 1px solid var(--c-border-strong, #cdd4e3); }
.nx-btn--outline:hover { background: var(--c-surface-2, var(--mist)); color: var(--c-fg, var(--ink)); }
.nx-cinematic .nx-btn { transition: transform var(--t-fast) var(--ease-out), background-color var(--t-fast), color var(--t-fast), box-shadow var(--t-med) var(--ease-out), border-color var(--t-fast); }
.nx-cinematic .nx-btn:active { transform: scale(.98); }
.nx-cinematic .nx-badge { background: var(--c-surface-2); color: var(--c-fg-2); border-color: var(--c-border); }
.nx-cinematic .nx-badge--testing { background: rgba(95, 212, 240, .1); color: #9fe6f7; border-color: rgba(95, 212, 240, .28); }
.nx-cinematic .nx-badge--available { background: rgba(80, 220, 150, .1); color: #8ff0bf; border-color: rgba(80, 220, 150, .3); }
.nx-cinematic .nx-badge--coming_soon, .nx-cinematic .nx-badge--development { background: rgba(155, 134, 255, .1); color: #c9bdff; border-color: rgba(155, 134, 255, .3); }
.nx-cinematic .nx-store { background: var(--c-fg); color: var(--c-bg); border-color: var(--c-fg); }
.nx-cinematic .nx-store.is-soon { background: transparent; color: var(--c-fg-2); border: 1px solid var(--c-border-strong); }
.nx-cinematic .nx-store.is-testing { background: rgba(95, 212, 240, .08); color: var(--c-fg); border-color: rgba(95, 212, 240, .3); }

/* ---------- Scene scaffolding ---------- */
.nx-scene { position: relative; }
.nx-scene__stage { position: relative; }
.nx-scene__head { max-width: 900px; margin-bottom: clamp(48px, 7vw, 96px); }
html[data-nx-tier="normal"] .nx-scene--hero .nx-scene__track,
html[data-nx-tier="high"] .nx-scene--hero .nx-scene__track { height: 165vh; }
html[data-nx-tier="normal"] .nx-scene--eco .nx-scene__track,
html[data-nx-tier="high"] .nx-scene--eco .nx-scene__track { height: calc((var(--steps, 3) + .6) * 100vh); }
html[data-nx-tier="normal"] .nx-scene__stage,
html[data-nx-tier="high"] .nx-scene__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }

/* ---------- Scene 01 — Hero ---------- */
.nx-hero2 { min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; padding: calc(var(--header-h) + 40px) 0 clamp(72px, 12vh, 140px); isolation: isolate; background: radial-gradient(120% 80% at 50% 110%, #0b1224 0%, var(--c-bg) 60%); }
.nx-cinematic .nx-scene--hero { margin-top: calc(var(--header-h) * -1); }
.nx-hero2__light { position: absolute; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(38% 60% at 62% -8%, var(--c-light) 0%, rgba(120, 160, 255, .06) 45%, transparent 70%); }
.nx-hero2__light::after { content: ""; position: absolute; left: 50%; top: -10%; width: 52vw; height: 90vh; transform: translateX(-10%); background: linear-gradient(180deg, rgba(190, 215, 255, .10), transparent 75%); clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%); filter: blur(24px); opacity: .7; }
.nx-hero2__core { position: absolute; inset: 0; z-index: -1; pointer-events: none; transform-origin: 62% 42%; }
.nx-core { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s var(--ease-out); }
.nx-core.is-ready { opacity: 1; }
.nx-corefallback { position: absolute; left: 62%; top: 42%; width: min(46vw, 560px); aspect-ratio: 1; transform: translate(-50%, -50%); }
.nx-corefallback i { position: absolute; inset: 42%; border-radius: 50%; background: radial-gradient(circle, #fff 0%, #bde9ff 20%, rgba(95, 212, 240, .5) 45%, transparent 72%); filter: blur(2px); box-shadow: 0 0 80px 30px rgba(95, 212, 240, .25), 0 0 180px 60px rgba(155, 134, 255, .15); }
.nx-corefallback span { position: absolute; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .10); }
.nx-corefallback span:nth-child(1) { inset: 28%; }
.nx-corefallback span:nth-child(2) { inset: 14%; border-color: rgba(255, 255, 255, .07); }
.nx-corefallback span:nth-child(3) { inset: 0; border-color: rgba(255, 255, 255, .045); }
.nx-core.is-ready + .nx-corefallback, .nx-hero2__core.has-canvas .nx-corefallback { opacity: 0; transition: opacity .8s; }
.nx-hero2__copy { position: relative; }
.nx-hero2__title { max-width: 11ch; }
.nx-hero2__lede { max-width: 560px; margin: 28px 0 0; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.6; color: var(--c-fg-2); }
.nx-hero2__sub { margin: 14px 0 0; font-size: 1rem; color: var(--c-muted); }
.nx-hero2 .nx-actions { margin-top: 36px; }
.nx-hero2__cue { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--c-muted); }
.nx-hero2__cue span { width: 1px; height: 38px; background: linear-gradient(180deg, transparent, var(--c-fg-2)); animation: nx-cue 2.4s var(--ease-in-out) infinite; transform-origin: top; }
@keyframes nx-cue { 0% { transform: scaleY(0); opacity: 0; } 40% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1) translateY(20px); opacity: 0; } }
@media (max-width: 767px) {
	.nx-hero2 { align-items: flex-end; padding-bottom: 88px; }
	.nx-corefallback { left: 50%; top: 30%; width: 86vw; }
	.nx-hero2__core { transform-origin: 50% 30%; }
	.nx-hero2__cue { display: none; }
}

/* Entry sequence (not on minimal tier) */
@media (prefers-reduced-motion: no-preference) {
	html:not([data-nx-tier="minimal"]) .nx-seq { animation: nx-seq-in .9s var(--ease-out) both; animation-delay: calc(var(--d, 0) * 110ms + 80ms); }
	html:not([data-nx-tier="minimal"]) .nx-hero2__title.nx-seq { animation-name: nx-seq-title; }
}
@keyframes nx-seq-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes nx-seq-title { from { opacity: .15; transform: translateY(28px); } to { opacity: 1; transform: none; } }

/* Scroll-driven exit of the hero (pinned tiers) */
html[data-nx-tier="normal"] .nx-scene--hero .nx-hero2__copy,
html[data-nx-tier="high"] .nx-scene--hero .nx-hero2__copy { transform: translate3d(0, calc(var(--p, 0) * -14vh), 0); opacity: calc(1 - var(--p, 0) * 1.7); }
html[data-nx-tier="normal"] .nx-scene--hero .nx-hero2__core,
html[data-nx-tier="high"] .nx-scene--hero .nx-hero2__core { transform: translate3d(calc(var(--p, 0) * 10vw), calc(var(--p, 0) * 16vh), 0) scale(calc(1 - var(--p, 0) * .42)); opacity: calc(1 - var(--p, 0) * .55); }
html[data-nx-tier="normal"] .nx-scene--hero .nx-hero2__light,
html[data-nx-tier="high"] .nx-scene--hero .nx-hero2__light { opacity: calc(1 - var(--p, 0) * .8); }
html[data-nx-tier="normal"] .nx-scene--hero .nx-hero2__cue,
html[data-nx-tier="high"] .nx-scene--hero .nx-hero2__cue { opacity: calc(1 - var(--p, 0) * 4); }

/* ---------- Scene 02 — Ecosystem ---------- */
.nx-eco { padding: var(--sp-scene) 0; isolation: isolate; background: var(--c-bg); }
html[data-nx-tier="normal"] .nx-eco, html[data-nx-tier="high"] .nx-eco { display: flex; align-items: flex-start; padding: calc(var(--header-h) + clamp(16px, 5vh, 56px)) 0 32px; }
html[data-nx-tier="normal"] .nx-eco__title, html[data-nx-tier="high"] .nx-eco__title { font-size: clamp(1.8rem, 3.3vw, 3rem); max-width: 16ch; margin-bottom: clamp(20px, 3.5vh, 36px); }
@media (max-height: 820px) {
	html[data-nx-tier="normal"] .nx-eco .nx-product__features, html[data-nx-tier="high"] .nx-eco .nx-product__features,
	html[data-nx-tier="normal"] .nx-eco .nx-product__note, html[data-nx-tier="high"] .nx-eco .nx-product__note { display: none; }
	html[data-nx-tier="normal"] .nx-eco .nx-product__tagline, html[data-nx-tier="high"] .nx-eco .nx-product__tagline { margin-top: 14px; }
}
html[data-nx-tier="normal"] .nx-eco__dots, html[data-nx-tier="high"] .nx-eco__dots { position: absolute; right: var(--gutter); top: 50%; flex-direction: column; margin: 0; transform: translateY(-50%); z-index: 2; }
.nx-eco__atmos { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(50% 60% at 72% 50%, color-mix(in srgb, var(--eco-tint, #3f7bff) 16%, transparent), transparent 70%); transition: background 1.2s var(--ease-out); }
.nx-scene--eco[data-active="0"] { --eco-tint: #3f7bff; }
.nx-scene--eco[data-active="1"] { --eco-tint: #1f9f96; }
.nx-scene--eco[data-active="2"] { --eco-tint: #7a5cff; }
.nx-scene--eco[data-active="3"] { --eco-tint: #2aa6d6; }
.nx-eco__grid { display: grid; gap: 48px; width: 100%; }
.nx-eco__title { font-size: clamp(2rem, 5vw, 4.2rem); max-width: 12ch; margin-bottom: 40px; }
.nx-eco__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 72px; }
.nx-eco__kicker { margin: 0 0 10px; font-size: .8rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--c-accent); }
.nx-eco__heading { font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 500; letter-spacing: -.02em; margin-bottom: 14px; }
.nx-eco__step p { color: var(--c-fg-2); max-width: 520px; }
.nx-eco__small { font-size: .88rem; color: var(--c-muted) !important; margin: 20px 0 10px; }
.nx-eco__areas { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.nx-eco__areas li { padding: 6px 12px; border: 1px solid var(--c-border); border-radius: 999px; font-size: .85rem; color: var(--c-fg-2); }
.nx-eco__visual { display: none; }
.nx-eco__inline-visual { margin-top: 40px; }
.nx-eco__dots { display: flex; gap: 10px; margin-top: 36px; }
.nx-eco__dots[hidden] { display: none; }
.nx-eco__dot { width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.nx-eco__dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--c-border-strong); transition: transform var(--t-fast), background-color var(--t-fast); }
.nx-eco__dot[aria-current="true"]::before { background: var(--c-fg); transform: scale(1.4); }
.nx-eco__dot:focus-visible { outline: 2px solid var(--c-accent); border-radius: 50%; }

@media (min-width: 960px) {
	html[data-nx-tier="normal"] .nx-eco__grid, html[data-nx-tier="high"] .nx-eco__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 64px; }
	html[data-nx-tier="normal"] .nx-eco__steps, html[data-nx-tier="high"] .nx-eco__steps { position: relative; display: block; min-height: 380px; }
	html[data-nx-tier="normal"] .nx-eco__step, html[data-nx-tier="high"] .nx-eco__step { position: absolute; inset: 0 0 auto 0; opacity: 0; visibility: hidden; transform: translate3d(0, 32px, 0); transition: opacity var(--t-med) var(--ease-out), transform var(--t-slow) var(--ease-out), visibility 0s linear var(--t-med); }
	html[data-nx-tier="normal"] .nx-eco__step.is-past, html[data-nx-tier="high"] .nx-eco__step.is-past { transform: translate3d(0, -32px, 0); }
	html[data-nx-tier="normal"] .nx-eco__step.is-active, html[data-nx-tier="high"] .nx-eco__step.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: .12s, .12s, 0s; }
	html[data-nx-tier="normal"] .nx-eco__inline-visual, html[data-nx-tier="high"] .nx-eco__inline-visual { display: none; }
	html[data-nx-tier="normal"] .nx-eco__visual, html[data-nx-tier="high"] .nx-eco__visual { display: block; position: relative; height: min(72vh, 680px); perspective: 1400px; }
	html[data-nx-tier="normal"] .nx-eco__layer, html[data-nx-tier="high"] .nx-eco__layer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translate3d(0, 60px, -120px) rotateY(-14deg) scale(.92); transition: opacity var(--t-med) var(--ease-out), transform var(--t-slow) var(--ease-out); }
	html[data-nx-tier="normal"] .nx-eco__layer.is-past, html[data-nx-tier="high"] .nx-eco__layer.is-past { transform: translate3d(0, -60px, -200px) rotateY(10deg) scale(.86); }
	html[data-nx-tier="normal"] .nx-eco__layer.is-active, html[data-nx-tier="high"] .nx-eco__layer.is-active { opacity: 1; transform: none; }
	.nx-eco__layer .nx-device { width: min(300px, 26vw, 31vh); }
	.nx-eco__layer .nx-device--back { width: min(240px, 20vw, 25vh); }
	.nx-eco__layer .nx-visual--devices { min-height: 0; }
}

/* Orbit (intelligence layer) */
.nx-orbit { position: relative; width: min(520px, 42vw); aspect-ratio: 1; }
.nx-orbit__core { position: absolute; inset: 44%; border-radius: 50%; background: radial-gradient(circle, #fff 0%, #bfeaff 25%, rgba(95, 212, 240, .45) 55%, transparent 75%); box-shadow: 0 0 60px 20px rgba(95, 212, 240, .22), 0 0 140px 50px rgba(155, 134, 255, .14); }
.nx-orbit__ring { position: absolute; border-radius: 50%; border: 1px solid var(--c-border); }
.nx-orbit__ring--1 { inset: 30%; }
.nx-orbit__ring--2 { inset: 16%; border-style: dashed; border-color: rgba(255, 255, 255, .08); }
.nx-orbit__ring--3 { inset: 2%; border-color: rgba(255, 255, 255, .05); }
.nx-orbit__node { position: absolute; left: 50%; top: 50%; padding: 8px 14px; border-radius: 999px; background: var(--c-glass); border: 1px solid var(--c-border-strong); color: var(--c-fg); font-size: .85rem; font-weight: 500; white-space: nowrap; transform: rotate(calc(var(--i) * 72deg - 40deg)) translateX(calc(min(520px, 42vw) * .42)) rotate(calc((var(--i) * 72deg - 40deg) * -1)) translate(-50%, -50%); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@media (prefers-reduced-motion: no-preference) {
	html[data-nx-tier="high"] .nx-orbit__ring--2, html[data-nx-tier="normal"] .nx-orbit__ring--2 { animation: nx-spin 60s linear infinite; }
}
@keyframes nx-spin { to { transform: rotate(360deg); } }

/* Constellation (what comes next) */
.nx-constellation { position: relative; width: min(460px, 38vw); aspect-ratio: 1; }
.nx-constellation span { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .5); box-shadow: 0 0 18px rgba(155, 134, 255, .5); }
.nx-constellation span:nth-child(1) { left: 48%; top: 46%; width: 16px; height: 16px; background: #fff; box-shadow: 0 0 40px rgba(95, 212, 240, .7); }
.nx-constellation span:nth-child(2) { left: 22%; top: 24%; }
.nx-constellation span:nth-child(3) { left: 74%; top: 18%; }
.nx-constellation span:nth-child(4) { left: 86%; top: 56%; }
.nx-constellation span:nth-child(5) { left: 66%; top: 82%; }
.nx-constellation span:nth-child(6) { left: 30%; top: 78%; }
.nx-constellation span:nth-child(7) { left: 8%; top: 52%; }
.nx-constellation span:nth-child(8) { left: 44%; top: 8%; }
.nx-constellation span:nth-child(9) { left: 56%; top: 62%; opacity: .6; }
@media (prefers-reduced-motion: no-preference) {
	.nx-constellation span:not(:first-child) { animation: nx-twinkle 4s ease-in-out infinite; animation-delay: calc(var(--s) * -.45s); }
}
@keyframes nx-twinkle { 0%, 100% { opacity: .25; } 50% { opacity: .9; } }

/* Product panel on dark */
.nx-cinematic .nx-product__index { color: var(--c-accent); }
.nx-cinematic .nx-product__name a { color: var(--c-fg); }
.nx-cinematic .nx-product__meta { color: var(--c-muted); }
.nx-cinematic .nx-product__tagline { color: var(--c-fg); }
.nx-cinematic .nx-product__desc { color: var(--c-fg-2); }
.nx-cinematic .nx-product__features li { border-color: var(--c-border); color: var(--c-fg-2); background: var(--c-surface); }
.nx-cinematic .nx-product__note { color: var(--c-muted); }
.nx-cinematic .nx-brandpanel { background: var(--c-surface); border-color: var(--c-border); }
.nx-cinematic .nx-brandpanel__shape--peach { background: rgba(95, 212, 240, .10); }
.nx-cinematic .nx-brandpanel__shape--sage { background: rgba(155, 134, 255, .10); }
.nx-cinematic .nx-brandpanel__name { color: var(--c-fg); }
.nx-cinematic .nx-brandpanel__sub { color: var(--c-muted); }
.nx-cinematic .nx-visual__shape--peach { background: radial-gradient(circle, rgba(95, 212, 240, .16), transparent 70%); }
.nx-cinematic .nx-visual__shape--sage { background: radial-gradient(circle, rgba(155, 134, 255, .14), transparent 70%); }
.nx-cinematic .nx-device { box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), var(--shadow-deep), 0 0 80px -20px rgba(95, 212, 240, .25); }
.nx-cinematic .nx-editor-hint { color: var(--c-muted); }

/* ---------- Scene 03 — Flow ---------- */
.nx-scene--flow { padding: var(--sp-scene) 0; background: linear-gradient(180deg, var(--c-bg) 0%, var(--c-bg-2) 100%); }
.nx-flow { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 40px; }
.nx-flow::before { content: ""; position: absolute; left: 11px; top: 12px; bottom: 12px; width: 1px; background: linear-gradient(180deg, var(--c-accent), var(--c-accent-2)); opacity: .5; }
.nx-flow__step { position: relative; padding-left: 48px; }
.nx-flow__node { position: absolute; left: 4px; top: 6px; width: 15px; height: 15px; border-radius: 50%; background: var(--c-bg); border: 1px solid var(--c-accent); box-shadow: 0 0 0 4px rgba(95, 212, 240, .08); transition: background-color .6s var(--ease-out) calc(var(--i) * .14s + .2s), box-shadow .6s var(--ease-out) calc(var(--i) * .14s + .2s); }
.nx-flow__step.is-in .nx-flow__node { background: var(--c-accent); box-shadow: 0 0 0 6px rgba(95, 212, 240, .12), 0 0 30px rgba(95, 212, 240, .6); }
.nx-flow__title { font-size: 1.3rem; font-weight: 500; letter-spacing: -.02em; margin-bottom: 8px; }
.nx-flow__step p { color: var(--c-fg-2); margin: 0; max-width: 34ch; }
@media (min-width: 1024px) {
	.nx-flow { grid-template-columns: repeat(5, 1fr); gap: 28px; }
	.nx-flow::before { left: 8px; right: 8px; top: 12px; bottom: auto; width: auto; height: 1px; background: linear-gradient(90deg, var(--c-accent), var(--c-accent-2)); }
	.nx-flow__step { padding: 52px 0 0; }
	.nx-flow__node { top: 5px; left: 0; }
}

/* ---------- Scene 04 — About ---------- */
.nx-scene--about { padding: var(--sp-scene) 0; background: var(--c-bg-2); }
.nx-scene--about .nx-display { max-width: 12ch; margin-bottom: clamp(48px, 6vw, 80px); }
.nx-about2__grid { display: grid; gap: 56px; }
@media (min-width: 960px) { .nx-about2__grid { grid-template-columns: 1.1fr 1fr; gap: 96px; } }
.nx-about2__statement p { font-size: clamp(1.2rem, 2vw, 1.55rem); line-height: 1.5; letter-spacing: -.01em; color: var(--c-fg); }
.nx-about2__statement .nx-about2__legal { font-size: .95rem; color: var(--c-muted); margin-top: 24px; }
.nx-principles { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--c-border); }
.nx-principles li { padding: 22px 0; border-bottom: 1px solid var(--c-border); }
.nx-principles h3 { font-size: 1.08rem; font-weight: 600; margin-bottom: 4px; }
.nx-principles p { margin: 0; color: var(--c-fg-2); }
.nx-about2__content { margin-top: 64px; }
.nx-cinematic .nx-prose p, .nx-cinematic .nx-prose li { color: var(--c-fg-2); }

/* ---------- Scene 05 — Trust ---------- */
.nx-scene--trust { padding: var(--sp-scene) 0; background: var(--c-bg); }
.nx-trust2 { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--c-border); border: 1px solid var(--c-border); border-radius: var(--r-l); overflow: hidden; }
@media (min-width: 720px) { .nx-trust2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .nx-trust2 { grid-template-columns: repeat(4, 1fr); } }
.nx-trust2__item { padding: clamp(28px, 3vw, 40px); background: var(--c-bg); transition: background-color var(--t-med) var(--ease-out); }
.nx-trust2__item:hover { background: var(--c-bg-3); }
.nx-trust2__icon { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid var(--c-border-strong); color: var(--c-accent); margin-bottom: 28px; }
.nx-trust2__item h3 { font-size: 1.1rem; margin-bottom: 8px; }
.nx-trust2__item p { margin: 0; color: var(--c-fg-2); font-size: .98rem; }
.nx-trust2__links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 32px 0 0; }

/* ---------- Scene 06 — Finale ---------- */
.nx-scene--finale { position: relative; overflow: hidden; padding: var(--sp-scene) 0 0; text-align: center; background: radial-gradient(60% 50% at 50% 30%, #0c1428 0%, var(--c-bg) 70%); isolation: isolate; }
.nx-finale__core { position: absolute; left: 50%; top: 26%; width: min(70vw, 640px); aspect-ratio: 1; transform: translate(-50%, -50%); z-index: -1; pointer-events: none; }
.nx-finale__core span { position: absolute; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .07); }
.nx-finale__core span:nth-child(1) { inset: 40%; border: 0; background: radial-gradient(circle, rgba(255, 255, 255, .9), rgba(95, 212, 240, .35) 40%, transparent 72%); filter: blur(4px); }
.nx-finale__core span:nth-child(2) { inset: 24%; }
.nx-finale__core span:nth-child(3) { inset: 6%; border-color: rgba(255, 255, 255, .04); }
.nx-finale__inner { position: relative; }
.nx-scene--finale .nx-display { max-width: 12ch; margin: 0 auto; font-size: clamp(2.3rem, 6.6vw, 5.8rem); }
.nx-scene--finale .nx-actions { margin-top: 40px; }
.nx-finale__contact { margin: 28px 0 0; font-size: .95rem; }
.nx-finale__wordmark { margin: clamp(64px, 10vw, 140px) 0 0; font-family: var(--display); font-size: clamp(3.4rem, 17vw, 18rem); font-weight: 700; letter-spacing: -.05em; line-height: .8; white-space: nowrap; color: transparent; background: linear-gradient(180deg, rgba(244, 246, 251, .22) 0%, rgba(244, 246, 251, .04) 70%, transparent 100%); -webkit-background-clip: text; background-clip: text; user-select: none; }

/* ---------- Reveals (observer in main.js; content stays visible if scripts fail to run) ---------- */
@media (prefers-reduced-motion: no-preference) {
	html.nx-reveal-ready:not([data-nx-tier="minimal"]) .nx-home2 .nx-reveal { transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); transform: translate3d(0, 28px, 0); }
	html.nx-reveal-ready:not([data-nx-tier="minimal"]) .nx-home2 .nx-display.nx-reveal { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease-out), opacity .9s var(--ease-out), transform 1.1s var(--ease-out); }
	html.nx-reveal-ready .nx-home2 .nx-reveal.is-in { opacity: 1; transform: none; }
	html.nx-reveal-ready .nx-home2 .nx-display.nx-reveal.is-in { clip-path: inset(-10% -10% -10% -10%); }
}
html[data-nx-tier="minimal"] .nx-home2 .nx-reveal { opacity: 1 !important; transform: none !important; clip-path: none !important; }

/* ---------- Minimal tier: no motion at all ---------- */
html[data-nx-tier="minimal"] .nx-core { display: none; }
html[data-nx-tier="minimal"] .nx-hero2__cue span { animation: none; }
html[data-nx-tier="minimal"] .nx-home2 * { animation: none !important; }

/* ---------- Cursor-aware CTA (fine pointers only; transform set by JS) ---------- */
.nx-magnetic { will-change: transform; }

/* ---------- Small screens ---------- */
@media (max-width: 480px) {
	.nx-display { font-size: clamp(2.3rem, 11.5vw, 3.2rem); }
	.nx-display--m { font-size: clamp(1.9rem, 9vw, 2.6rem); }
	.nx-hero2 .nx-btn--lg { width: 100%; }
	.nx-finale__wordmark { font-size: 17vw; }
}

/* Footer continues the dark environment */
.nx-cinematic .nx-footer { background: var(--c-bg); border-top-color: var(--c-border); }