/*
 * Nexora Black SaaS System v3
 * Additive theme + motion layer. The original structural stylesheet remains intact.
 * Base canvas is pure black; elevated UI uses near-black translucent surfaces.
 */
/* ==========================================================================
   Nexora v5 accent systems — four page-wide gradient combinations
   ========================================================================== */
:root,html[data-theme="violet"]{
  --nx-primary:#8b5cf6;--nx-primary-rgb:139 92 246;
  --nx-primary-deep:#7c3aed;--nx-primary-deep-rgb:124 58 237;
  --nx-primary-dark:#5b21b6;--nx-primary-dark-rgb:91 33 182;
  --nx-primary-darker:#4c1d95;--nx-primary-darker-rgb:76 29 149;
  --nx-primary-hover:#6d28d9;--nx-primary-light:#a78bfa;--nx-primary-light-rgb:167 139 250;
  --nx-primary-pale:#c4b5fd;--nx-primary-pale-rgb:196 181 253;
  --nx-secondary:#22d3ee;--nx-secondary-rgb:34 211 238;--nx-secondary-light:#67e8f9;
  --nx-secondary-deep:#3b82f6;--nx-secondary-dark:#0e7490;--nx-secondary-darker:#083344;
  --nx-tertiary:#f472b6;--nx-tertiary-rgb:244 114 182;--nx-tertiary-deep:#831843;
}
html[data-theme="ocean"]{
  --nx-primary:#2563eb;--nx-primary-rgb:37 99 235;
  --nx-primary-deep:#1d4ed8;--nx-primary-deep-rgb:29 78 216;
  --nx-primary-dark:#1e40af;--nx-primary-dark-rgb:30 64 175;
  --nx-primary-darker:#172554;--nx-primary-darker-rgb:23 37 84;
  --nx-primary-hover:#3b82f6;--nx-primary-light:#60a5fa;--nx-primary-light-rgb:96 165 250;
  --nx-primary-pale:#93c5fd;--nx-primary-pale-rgb:147 197 253;
  --nx-secondary:#14b8a6;--nx-secondary-rgb:20 184 166;--nx-secondary-light:#5eead4;
  --nx-secondary-deep:#0ea5e9;--nx-secondary-dark:#0f766e;--nx-secondary-darker:#134e4a;
  --nx-tertiary:#38bdf8;--nx-tertiary-rgb:56 189 248;--nx-tertiary-deep:#075985;
}
html[data-theme="ember"]{
  --nx-primary:#f97316;--nx-primary-rgb:249 115 22;
  --nx-primary-deep:#ea580c;--nx-primary-deep-rgb:234 88 12;
  --nx-primary-dark:#c2410c;--nx-primary-dark-rgb:194 65 12;
  --nx-primary-darker:#7c2d12;--nx-primary-darker-rgb:124 45 18;
  --nx-primary-hover:#fb923c;--nx-primary-light:#fb923c;--nx-primary-light-rgb:251 146 60;
  --nx-primary-pale:#fdba74;--nx-primary-pale-rgb:253 186 116;
  --nx-secondary:#facc15;--nx-secondary-rgb:250 204 21;--nx-secondary-light:#fde68a;
  --nx-secondary-deep:#eab308;--nx-secondary-dark:#a16207;--nx-secondary-darker:#713f12;
  --nx-tertiary:#fb7185;--nx-tertiary-rgb:251 113 133;--nx-tertiary-deep:#9f1239;
}
html[data-theme="mint"]{
  --nx-primary:#10b981;--nx-primary-rgb:16 185 129;
  --nx-primary-deep:#059669;--nx-primary-deep-rgb:5 150 105;
  --nx-primary-dark:#047857;--nx-primary-dark-rgb:4 120 87;
  --nx-primary-darker:#064e3b;--nx-primary-darker-rgb:6 78 59;
  --nx-primary-hover:#34d399;--nx-primary-light:#34d399;--nx-primary-light-rgb:52 211 153;
  --nx-primary-pale:#6ee7b7;--nx-primary-pale-rgb:110 231 183;
  --nx-secondary:#84cc16;--nx-secondary-rgb:132 204 22;--nx-secondary-light:#bef264;
  --nx-secondary-deep:#22c55e;--nx-secondary-dark:#4d7c0f;--nx-secondary-darker:#365314;
  --nx-tertiary:#2dd4bf;--nx-tertiary-rgb:45 212 191;--nx-tertiary-deep:#115e59;
}
:root {
  --paper: #000000;
  --ink: #f7f7fb;
  --muted: #9b9baa;
  --line: rgba(255,255,255,.11);
  --orange: var(--nx-primary);
  --orange-strong: var(--nx-primary-deep);
  --accent-ink: var(--nx-primary-light);
  --orange-light: rgb(var(--nx-primary-rgb) / .24);
  --nx-black: #000000;
  --nx-surface-0: #030303;
  --nx-surface-1: #070708;
  --nx-surface-2: #0b0b0e;
  --nx-surface-3: #111116;
  --nx-text: #f7f7fb;
  --nx-muted: #9b9baa;
  --nx-faint: #666673;
  --nx-line: rgba(255,255,255,.10);
  --nx-line-strong: rgba(255,255,255,.18);
  --nx-violet: var(--nx-primary);
  --nx-violet-2: var(--nx-primary-light);
  --nx-cyan: var(--nx-secondary);
  --nx-blue: #60a5fa;
  --nx-green: #34d399;
  --nx-pink: var(--nx-tertiary);
  --nx-glow-violet: rgb(var(--nx-primary-rgb) / .20);
  --nx-glow-cyan: rgb(var(--nx-secondary-rgb) / .13);
  --nx-shadow: 0 30px 100px rgba(0,0,0,.72);
  --nx-ease-out: cubic-bezier(.16,1,.3,1);
  --nx-ease-spring: cubic-bezier(.2,.9,.2,1.1);
  color-scheme: dark;
}

html { background: #000; }
body {
  background: #000;
  color: var(--nx-text);
  min-height: 100%;
  overflow-x: clip;
  position: relative;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(700px circle at var(--nx-pointer-x, 68%) var(--nx-pointer-y, 12%), rgb(var(--nx-primary-rgb) / .11), transparent 58%),
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: auto, 44px 44px, 44px 44px;
  mask-image: linear-gradient(to bottom, #000 0, #000 72%, transparent 100%);
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.72'/%3E%3C/svg%3E");
  mix-blend-mode: screen;
}

.nx-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 500;
  width: 100%;
  height: 2px;
  transform: scaleX(var(--nx-scroll-progress,0));
  transform-origin: left center;
  background: linear-gradient(90deg,var(--nx-violet),var(--nx-cyan));
  box-shadow: 0 0 20px rgb(var(--nx-primary-rgb) / .55);
  pointer-events: none;
}

::selection { background: rgb(var(--nx-primary-rgb) / .38); color: #fff; }
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible {
  outline: 2px solid var(--nx-violet-2);
  outline-offset: 5px;
}
.skip-link { background:#fff; color:#000; border-radius:8px; }

.site-header {
  position: sticky;
  top: 0;
  height: 88px;
  padding-inline: max(28px,calc((100vw - 1420px)/2));
  background: rgba(0,0,0,.72);
  border-color: var(--nx-line);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  transition: height .35s var(--nx-ease-out), background .35s ease, box-shadow .35s ease;
}
.site-header.is-scrolled {
  height: 74px;
  background: rgba(0,0,0,.90);
  box-shadow: 0 14px 55px rgba(0,0,0,.45);
}
.brand>span { color:#fff; font-weight:690; }
.brand-symbol { fill: var(--nx-violet); filter: drop-shadow(0 0 12px rgb(var(--nx-primary-rgb) / .35)); }
.brand-cut { fill:#000; }
.brand-ai { border-color: rgba(255,255,255,.28); color:#bdbdc9; border-radius:3px; }
.desktop-nav { color:#b6b6c2; }
.desktop-nav a { transition: color .25s ease; }
.desktop-nav a:hover { color:#fff; }
.desktop-nav a::after { background:linear-gradient(90deg,var(--nx-violet),var(--nx-cyan)); height:2px; border-radius:999px; }
.menu-button span { background:#fff; }

.button {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  isolation: isolate;
  border: 1px solid rgba(255,255,255,.12);
  transition: transform .32s var(--nx-ease-out), border-color .32s ease, box-shadow .32s ease, background .32s ease;
}
.button::before {
  content:'';
  position:absolute;
  inset:-2px;
  z-index:-1;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.19) 45%,transparent 70%);
  transform:translateX(-130%);
  transition:transform .72s var(--nx-ease-out);
}
.button:hover::before { transform:translateX(130%); }
.button:hover { transform:translateY(-2px); }
.button:active { transform:translateY(0) scale(.985); }
.button-dark {
  background: linear-gradient(180deg,#151519,#09090b);
  color:#fff;
  border-color:rgba(255,255,255,.15);
  box-shadow:inset 0 1px rgba(255,255,255,.06),0 10px 30px rgba(0,0,0,.35);
}
.button-dark:hover { background:linear-gradient(180deg,#1b1823,#0b0a0f); border-color:rgb(var(--nx-primary-light-rgb) / .35); box-shadow:0 15px 42px rgba(0,0,0,.5),0 0 35px rgb(var(--nx-primary-rgb) / .10); }
.button-orange {
  background:linear-gradient(135deg,var(--nx-primary-deep) 0%,var(--nx-primary-dark) 55%,var(--nx-primary-darker) 100%);
  color:#fff;
  border-color:rgb(var(--nx-primary-pale-rgb) / .36);
  box-shadow:0 16px 45px rgb(var(--nx-primary-dark-rgb) / .28),inset 0 1px rgba(255,255,255,.16);
}
.button-orange:hover { background:linear-gradient(135deg,var(--nx-primary),var(--nx-primary-hover) 58%,var(--nx-primary-dark)); box-shadow:0 18px 55px rgb(var(--nx-primary-deep-rgb) / .38),0 0 0 1px rgb(var(--nx-primary-light-rgb) / .14); }
.text-link { color:#c3c3cc; transition:color .25s ease; }
.text-link:hover { color:#fff; }

.eyebrow,.small-note,.hero-footnote,.art-coordinate { color:#777785; }
.status-dot { background:var(--nx-violet); box-shadow:0 0 0 5px rgb(var(--nx-primary-rgb) / .08),0 0 16px rgb(var(--nx-primary-rgb) / .5); }

.hero {
  position: relative;
  min-height: min(880px,calc(100svh - 88px));
  padding-block: 92px 104px;
  isolation: isolate;
}
.hero::before {
  content:'';
  position:absolute;
  width:min(760px,60vw);
  height:min(760px,60vw);
  right:-18%;
  top:-28%;
  z-index:-2;
  border-radius:50%;
  background:radial-gradient(circle,rgb(var(--nx-primary-rgb) / .14),rgb(var(--nx-secondary-rgb) / .035) 36%,transparent 69%);
  filter:blur(16px);
}
.hero-copy { padding-top:18px; }
.hero-copy>.eyebrow { color:#878794; }
.hero h1 { color:#f8f8fb; font-weight:570; letter-spacing:-6.2px; text-wrap:balance; }
.hero-line-accent {
  font-family:Figtree,Arial,sans-serif;
  font-style:normal;
  font-weight:570;
  letter-spacing:-6.2px;
  color:transparent;
  background:linear-gradient(90deg,#fff 0%,var(--nx-primary-pale) 26%,var(--nx-primary) 60%,var(--nx-secondary-light) 105%);
  -webkit-background-clip:text;
  background-clip:text;
  filter:drop-shadow(0 12px 40px rgb(var(--nx-primary-rgb) / .13));
}
.hero-description { color:#9b9baa; max-width:610px; }
.hero-footnote { color:#686875; }

.hero-art {
  height:590px;
  perspective:1200px;
  transform-style:preserve-3d;
  --nx-parallax-x:0px;
  --nx-parallax-y:0px;
}
.hero-halo {
  inset:10px -60px -5px -55px;
  background:
    radial-gradient(ellipse at 57% 45%,rgb(var(--nx-primary-rgb) / .24),transparent 52%),
    radial-gradient(ellipse at 72% 62%,rgb(var(--nx-secondary-rgb) / .10),transparent 45%);
  filter:blur(18px);
}
.hero-browser {
  top:105px;
  left:14px;
  right:-28px;
  background:rgba(6,6,8,.92);
  border:1px solid rgba(255,255,255,.15);
  border-radius:16px;
  transform:rotate(-2deg) translate3d(calc(var(--nx-parallax-x)*.34),calc(var(--nx-parallax-y)*.34),0);
  box-shadow:var(--nx-shadow),0 0 0 1px rgb(var(--nx-primary-rgb) / .04),0 0 80px rgb(var(--nx-primary-dark-rgb) / .10);
  backdrop-filter:blur(18px);
}
.browser-chrome { height:40px; border-color:rgba(255,255,255,.08); background:#0a0a0d; color:#6f6f7d; }
.window-dots i { border:0; background:#34343b; width:6px; height:6px; }
.window-dots i:first-child { background:var(--nx-primary-deep); }
.hero-browser-body {
  height:345px;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),
    radial-gradient(circle at 77% 44%,rgb(var(--nx-primary-rgb) / .16),transparent 35%),
    #050506;
  background-size:24px 24px,24px 24px,auto,auto;
}
.mini-site-nav { color:#858590; }
.mini-site-nav b { color:#f5f5f8; }
.mini-site-content h2 { color:#f1f1f5; }
.mini-site-content h2 em { color:var(--nx-primary-light); }
.mini-site-content p,.mini-site-footer { color:#777785; }
.mini-site-link { border-color:rgba(255,255,255,.28); color:#d5d5dc; }
.sculpture-block {
  background:linear-gradient(135deg,var(--nx-primary-light),var(--nx-primary-deep) 52%,var(--nx-secondary-deep) 120%);
  box-shadow:inset 4px 4px 13px rgba(255,255,255,.15),inset -7px -8px 18px rgb(var(--nx-primary-darker-rgb) / .34),0 18px 30px rgb(var(--nx-primary-dark-rgb) / .24);
}
.sculpture-shadow { background:rgb(var(--nx-primary-deep-rgb) / .22); }
.sculpture-caption { color:#72727f; }

.float-layer { backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.brief-note {
  top:28px;
  left:-14px;
  width:232px;
  background:linear-gradient(145deg,rgba(20,17,31,.94),rgba(8,8,11,.94));
  color:#efeff5;
  border:1px solid rgb(var(--nx-primary-light-rgb) / .22);
  border-radius:14px;
  box-shadow:0 24px 65px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.05);
  transform:rotate(-6deg) translate3d(calc(var(--nx-parallax-x)*-.68),calc(var(--nx-parallax-y)*-.68),36px);
}
.brief-note::after,.token-note::after {
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.06),transparent 33%);
}
.note-heading { color:var(--nx-primary-light); }
.brief-note p { font-family:Figtree,Arial,sans-serif; font-style:normal; font-weight:520; letter-spacing:-.7px; }
.note-signoff { color:#737381; }
.token-note {
  right:-20px;
  bottom:35px;
  width:235px;
  background:linear-gradient(145deg,rgba(12,12,16,.96),rgba(5,5,7,.96));
  color:#ececf2;
  border:1px solid rgb(var(--nx-secondary-rgb) / .18);
  border-radius:14px;
  box-shadow:0 22px 60px rgba(0,0,0,.58),inset 0 1px rgba(255,255,255,.05);
  transform:rotate(5deg) translate3d(calc(var(--nx-parallax-x)*.62),calc(var(--nx-parallax-y)*.62),46px);
}
.token-swatches i { background:var(--nx-primary); box-shadow:0 0 20px rgb(var(--nx-primary-rgb) / .18); }
.token-swatches i:nth-child(2){background:var(--nx-secondary)}.token-swatches i:nth-child(3){background:#15151c;border:1px solid rgba(255,255,255,.17)}.token-swatches i:nth-child(4){background:#f5f5f7;border:0}
.token-note>span:last-child { color:#777783; }
.commit-note {
  left:14px;
  bottom:49px;
  background:rgba(7,7,9,.94);
  color:#f4f4f7;
  border:1px solid rgba(52,211,153,.20);
  border-radius:11px;
  box-shadow:0 18px 48px rgba(0,0,0,.6),0 0 36px rgba(52,211,153,.05);
  transform:rotate(-2deg) translate3d(calc(var(--nx-parallax-x)*-.35),calc(var(--nx-parallax-y)*-.35),52px);
}
.commit-check { background:rgba(52,211,153,.14); color:#6ee7b7; box-shadow:inset 0 0 0 1px rgba(52,211,153,.25); }
.commit-note small { color:#72727e; }
.annotation-arrow { stroke:var(--nx-primary-light); opacity:.65; }
.annotation-text { color:var(--nx-primary-light); font-family:Figtree,Arial,sans-serif; font-style:normal; font-size:12px; letter-spacing:.2px; text-transform:uppercase; }

.principle-strip { border-color:var(--nx-line); color:#c8c8d0; }
.principle-strip>span:first-child { color:#747480; }
.principle-strip i,.strip-mark { color:var(--nx-primary); }

.section-heading h2,.principles-copy h2,.faq-intro h2 { color:#f5f5f8; }
.section-heading h2 em,.principles-copy h2 em,.faq-intro h2 em,.closing-layout h2 em {
  font-family:Figtree,Arial,sans-serif;
  font-style:normal;
  color:var(--nx-primary-light);
}
.section-heading>p { color:#8d8d9a; }
.workspace-section,.workflow-section,.possibilities-section,.faq-section,.site-footer { background:#000; }

.studio {
  background:#030304;
  border-color:rgba(255,255,255,.13);
  border-radius:16px;
  box-shadow:0 36px 120px rgba(0,0,0,.75),0 0 0 1px rgb(var(--nx-primary-rgb) / .03);
}
.studio-toolbar { border-color:var(--nx-line); background:linear-gradient(180deg,#0b0b0e,#070708); }
.studio-project { color:#f0f0f4; }.studio-project small{color:#73737f}.project-icon{background:var(--nx-primary-deep);border-radius:8px;box-shadow:0 0 24px rgb(var(--nx-primary-deep-rgb) / .2)}
.device-controls { border-color:var(--nx-line); background:#050506; border-radius:8px; }
.device-controls button { border-radius:6px; transition:background .25s,box-shadow .25s; }
.device-controls button[aria-pressed=true] { background:#17121f; box-shadow:inset 0 0 0 1px rgb(var(--nx-primary-rgb) / .22); }
.device-controls svg { stroke:#c9c9d1; }
.demo-label { color:#73737f; }.demo-label .status-dot,.studio-status .status-dot{background:#34d399;box-shadow:0 0 12px rgba(52,211,153,.42)}
.studio-body { background:#050506; }
.studio-sidebar { background:#060607; border-color:var(--nx-line); }
.studio-tabs button { color:#9797a4; border:1px solid transparent; transition:background .25s,color .25s,border-color .25s,transform .25s; }
.studio-tabs button[aria-selected=true] { background:linear-gradient(135deg,#16111f,#0d0b12); color:#fff; border-color:rgb(var(--nx-primary-rgb) / .25); box-shadow:0 10px 30px rgba(0,0,0,.22); }
.studio-tabs button:not([aria-selected=true]):hover { background:#0d0d10; color:#dddde5; transform:translateX(2px); }
.inspector-label,.inspector p,.palette-name,.sidebar-footer { color:#747480; }
.inspector h3 { color:#f0f0f4; }
.palette-controls button[aria-pressed=true] { border-color:var(--nx-primary-light); box-shadow:0 0 0 3px rgb(var(--nx-primary-rgb) / .08); }
.palette-controls button span { background:var(--nx-primary); }.palette-controls button[data-palette=sage] span{background:var(--nx-secondary)}.palette-controls button[data-palette=ink] span{background:var(--nx-tertiary)}
.motion-demo-button { color:#c6c6d0; }
.studio-panel {
  background-color:#020203;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),radial-gradient(circle at 50% 35%,rgb(var(--nx-primary-rgb) / .08),transparent 45%);
  background-size:22px 22px,22px 22px,auto;
}
.preview-surface {
  background:#050506;
  border-color:rgba(255,255,255,.13);
  border-radius:11px;
  box-shadow:0 25px 80px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.02);
  --scene-bg:#060609;
  --scene-ink:#f2f2f6;
  --scene-accent:var(--nx-primary);
}
.preview-surface[data-palette=sage] { --scene-bg:#041012;--scene-ink:#effdff;--scene-accent:var(--nx-secondary); }
.preview-surface[data-palette=ink] { --scene-bg:#0c0710;--scene-ink:#fff5fb;--scene-accent:var(--nx-tertiary); }
.sample-site { background:var(--scene-bg); color:var(--scene-ink); }
.sample-copy h3 em { font-family:Figtree,Arial,sans-serif; font-style:normal; font-weight:500; text-shadow:0 0 28px color-mix(in srgb,var(--scene-accent) 34%,transparent); }
.sample-copy>p { opacity:.58; }.sample-bottom{border-color:rgba(255,255,255,.12)}
.sample-art-column,.sample-art-fold { box-shadow:inset 0 1px rgba(255,255,255,.12),0 22px 45px color-mix(in srgb,var(--scene-accent) 16%,transparent); }
.sample-art-dot { box-shadow:inset -6px -7px 12px rgba(255,255,255,.05),0 0 32px color-mix(in srgb,var(--scene-accent) 16%,transparent); }
.studio-status { background:#070708; border-color:var(--nx-line); color:#73737f; }
.product-notes>div { padding:24px 24px 24px 50px; border:1px solid var(--nx-line); border-radius:12px; background:linear-gradient(145deg,#070708,#030304); transition:transform .35s var(--nx-ease-out),border-color .35s,box-shadow .35s; }
.product-notes>div:hover { transform:translateY(-5px); border-color:rgb(var(--nx-primary-rgb) / .26); box-shadow:0 24px 50px rgba(0,0,0,.36); }
.product-notes>div>span { left:20px; top:27px; color:var(--nx-primary-light); }.product-notes h3{color:#ececf1}.product-notes p{color:#858591}

.workflow-step { border-color:var(--nx-line); color:#d8d8df; transition:color .25s,background .3s,padding .3s,border-color .3s; border-radius:10px; }
.workflow-step:last-child { border-color:var(--nx-line); }
.workflow-step:hover { background:linear-gradient(90deg,rgba(255,255,255,.035),transparent 80%); padding-left:12px; }
.workflow-step[aria-selected=true] { color:var(--nx-primary-pale); background:linear-gradient(90deg,rgb(var(--nx-primary-rgb) / .09),transparent 78%); border-color:rgb(var(--nx-primary-rgb) / .16); padding-left:12px; }
.workflow-step small,.step-number { color:#747480; }
.workflow-scene { background:#030304; border-color:var(--nx-line); border-radius:14px; box-shadow:inset 0 1px rgba(255,255,255,.025); }
.workflow-scene::before { background-image:radial-gradient(rgb(var(--nx-primary-light-rgb) / .22) 1px,transparent 1px); opacity:.25; }
.workflow-scene-footer { color:#72727e; }
.scene-sheet,.section-fragment,.refine-controls { background:#0b0b0e; border-color:rgba(255,255,255,.13); box-shadow:8px 8px 0 #050506,0 22px 55px rgba(0,0,0,.35); color:#efeff4; }
.scene-sheet h3 { color:#f1f1f5; font-family:Figtree,Arial,sans-serif; font-style:normal; }
.scene-sheet>span,.scene-sheet p,.section-fragment span { color:#777784; }.scene-sheet>i{border-color:var(--nx-line)}
.section-fragment:nth-child(2){background:#110d19}.section-fragment:nth-child(3){background:#071315}
.refine-word { color:var(--nx-primary-light); font-family:Figtree,Arial,sans-serif; font-style:normal; text-shadow:0 0 36px rgb(var(--nx-primary-rgb) / .22); }
.refine-controls i{background:var(--nx-primary)}.refine-controls i:nth-child(2){background:var(--nx-secondary)}.refine-controls i:nth-child(3){background:var(--nx-tertiary)}.refine-controls span{border-color:var(--nx-line)}
.scene-file-list { background:#07070a; color:#e9e9ef; border:1px solid rgba(255,255,255,.13); box-shadow:8px 8px 0 #030304,0 25px 55px rgba(0,0,0,.42); }
.scene-file-list h3,.scene-file-list>small{color:#8e8e9b}.scene-file-list p{border-color:var(--nx-line)}.scene-file-list p span{color:var(--nx-secondary-light)}

.principles-section {
  background:#000;
  color:#f2f2f5;
  border-block:1px solid var(--nx-line);
}
.principles-section::before {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(650px circle at 15% 35%,rgb(var(--nx-primary-rgb) / .12),transparent 58%),radial-gradient(500px circle at 92% 75%,rgb(var(--nx-secondary-rgb) / .06),transparent 58%);
}
.principles-layout { position:relative; z-index:1; }
.principles-copy>.eyebrow,.principles-copy>p:not(.eyebrow) { color:#83838f; }.principles-copy h2 em{color:var(--nx-primary-light)}.principles-copy>.text-link{color:#c7c7d0}
.principle-rows article { border-color:var(--nx-line); transition:background .3s,padding .3s,border-color .3s; border-radius:10px; }
.principle-rows article:hover { background:linear-gradient(90deg,rgb(var(--nx-primary-rgb) / .06),transparent 78%); padding-left:14px; border-color:rgb(var(--nx-primary-rgb) / .18); }
.principle-icon { color:var(--nx-primary-light); }.principle-rows p{color:#858591}.principle-index{color:#62626f}

.concept-grid { perspective:1200px; }
.concept-card { --nx-tilt-x:0deg;--nx-tilt-y:0deg;--nx-card-glow-x:50%;--nx-card-glow-y:50%; transform-style:preserve-3d; }
.concept-art {
  background:#07070a;
  color:#eeeef3;
  border:1px solid var(--nx-line);
  border-radius:15px;
  transform:perspective(1000px) rotateX(var(--nx-tilt-x)) rotateY(var(--nx-tilt-y)) translateY(0);
  transform-style:preserve-3d;
  box-shadow:0 28px 70px rgba(0,0,0,.46),inset 0 1px rgba(255,255,255,.035);
  transition:transform .18s ease-out,border-color .35s,box-shadow .35s;
}
.concept-art::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(360px circle at var(--nx-card-glow-x) var(--nx-card-glow-y),rgb(var(--nx-primary-rgb) / .14),transparent 55%);
  opacity:0;
  transition:opacity .35s;
}
.concept-card:hover .concept-art { transform:perspective(1000px) rotateX(var(--nx-tilt-x)) rotateY(var(--nx-tilt-y)) translateY(-8px); border-color:rgb(var(--nx-primary-light-rgb) / .24); box-shadow:0 38px 90px rgba(0,0,0,.62),0 0 45px rgb(var(--nx-primary-rgb) / .05); }
.concept-card:hover .concept-art::before { opacity:1; }
.concept-nav,.concept-word,.concept-art-footer,.concept-creative-shape,.concept-vase,.concept-chart { transform-style:preserve-3d; }
.concept-nav,.concept-word,.concept-art-footer { transform:translateZ(24px); }
.concept-creative .concept-art{background:linear-gradient(145deg,#0a0710,#050506)}
.concept-product .concept-art{background:linear-gradient(145deg,#071014,#050506);color:#e7fbff}
.concept-digital .concept-art{background:linear-gradient(145deg,#0f0810,#050506);color:#fff0f7}
.concept-creative-shape i{border-color:var(--nx-primary-deep)}.concept-creative-shape i:nth-child(2){border-color:var(--nx-primary)}.concept-creative-shape i:nth-child(3){border-color:var(--nx-primary-light)}
.concept-vase i{background:linear-gradient(90deg,var(--nx-secondary-darker),var(--nx-secondary) 47%,var(--nx-secondary-dark));box-shadow:inset 0 -3px 5px rgba(0,0,0,.3),0 14px 30px rgb(var(--nx-secondary-rgb) / .08)}
.concept-chart{background:rgba(255,255,255,.035);border-color:rgb(var(--nx-tertiary-rgb) / .16)}.concept-chart i,.concept-chart i:nth-child(3),.concept-chart i:nth-child(5){background:var(--nx-tertiary)}.concept-chart i:nth-child(2),.concept-chart i:nth-child(4){background:var(--nx-tertiary-deep)}
.concept-info strong{color:#e9e9ef}.concept-info small{color:#777784}.concept-arrow{border-color:var(--nx-line);color:#aaaab5}.concept-card:hover .concept-arrow{background:var(--nx-primary-deep);color:#fff;border-color:var(--nx-primary);box-shadow:0 0 25px rgb(var(--nx-primary-deep-rgb) / .22)}

.faq-section { border-color:var(--nx-line); }
.faq-intro .eyebrow,.faq-intro p:last-child,.faq-list details p { color:#858591; }
.faq-list details { border-color:var(--nx-line); }
.faq-list summary { color:#d9d9e0; transition:color .25s,padding .25s; }
.faq-list summary:hover { color:#fff; padding-left:8px; }
.faq-list summary>span { color:var(--nx-primary); }
.faq-list details[open] summary { color:var(--nx-primary-pale); }

.closing-section {
  background:#000;
  border-block:1px solid var(--nx-line);
  position:relative;
  isolation:isolate;
}
.closing-section::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:radial-gradient(600px circle at 82% 50%,rgb(var(--nx-primary-rgb) / .16),transparent 55%),radial-gradient(450px circle at 92% 70%,rgb(var(--nx-secondary-rgb) / .06),transparent 60%);
}
.closing-layout .eyebrow { color:#747480; }.closing-layout h2{color:#f6f6f8}.closing-layout h2 em{color:var(--nx-primary-light)}
.closing-mark { filter:drop-shadow(0 24px 55px rgb(var(--nx-primary-dark-rgb) / .2)); }
.closing-mark>span { background:linear-gradient(135deg,var(--nx-primary-deep),var(--nx-secondary-deep)); border:1px solid rgba(255,255,255,.10); box-shadow:inset 0 1px rgba(255,255,255,.12); }
.closing-mark>i { background:#000; color:#b6b6c0; }

.site-footer { color:#d8d8de; }.footer-top>p,.footer-bottom{color:#777784}.footer-bottom{border-color:var(--nx-line)}
.footer-top nav a,.back-top { transition:color .25s; }.footer-top nav a:hover,.back-top:hover{color:var(--nx-primary-light)}

.concept-dialog {
  background:#08080a;
  color:#f3f3f7;
  border-color:rgba(255,255,255,.16);
  border-radius:16px;
  box-shadow:0 40px 140px rgba(0,0,0,.85),0 0 0 1px rgb(var(--nx-primary-rgb) / .04);
}
.concept-dialog::backdrop { background:rgba(0,0,0,.78); backdrop-filter:blur(12px); }
.dialog-eyebrow,.concept-dialog p:not(.dialog-eyebrow){color:#858591}.concept-dialog h2{color:#f4f4f7}.dialog-close{color:#c8c8d0}
.code-view { background:#050508; color:#e9e9ef; border-color:rgba(255,255,255,.13); border-radius:10px; box-shadow:inset 0 1px rgba(255,255,255,.03); }
.code-heading{color:#858591;border-color:var(--nx-line)}.code-view .code-key{color:var(--nx-primary-light)}.code-view .code-value{color:var(--nx-secondary-light)}.code-view .code-comment{color:#6b7280}.code-files{color:#9ca3af}
.mobile-nav { background:rgba(0,0,0,.96); backdrop-filter:blur(18px); }.mobile-nav a{border-color:var(--nx-line);color:#eeeef2}.mobile-nav a>span{color:#6f6f7c}

/* Entrance, ambient, and micro-interaction choreography. */
@media (prefers-reduced-motion:no-preference) {
  html[data-motion=on] .status-dot { animation:nx-dark-status-pulse 3.2s ease-in-out infinite; }
  html[data-motion=on] .hero-halo { animation:nx-dark-halo-breathe 8s ease-in-out infinite alternate; }
  html[data-motion=on] .hero-browser { animation:nx-dark-canvas-enter 1.25s var(--nx-ease-out) both,nx-dark-panel-float 8s ease-in-out 1.4s infinite; }
  html[data-motion=on] .brief-note { animation:nx-dark-brief-enter 1s var(--nx-ease-out) .16s both,nx-dark-card-drift-a 9s ease-in-out 1.3s infinite; }
  html[data-motion=on] .token-note { animation:nx-dark-token-enter 1.05s var(--nx-ease-out) .34s both,nx-dark-card-drift-b 10s ease-in-out 1.45s infinite; }
  html[data-motion=on] .commit-note { animation:nx-dark-commit-enter .75s var(--nx-ease-out) .66s both,nx-dark-commit-glow 4.5s ease-in-out 1.6s infinite; }
  html[data-motion=on] .hero-line { animation:nx-dark-line-enter .92s var(--nx-ease-out) both; }
  html[data-motion=on] .hero-line:nth-child(2){animation-delay:.09s} html[data-motion=on] .hero-line:nth-child(3){animation-delay:.18s}
  html[data-motion=on] .reveal.is-pending { opacity:0; translate:0 34px; filter:blur(8px); scale:.985; }
  html[data-motion=on] .reveal { transition:opacity .8s var(--nx-ease-out),translate .9s var(--nx-ease-out),filter .8s ease,scale .9s var(--nx-ease-out); }
  html[data-motion=on] .principle-rows article.reveal.is-pending { translate:28px 0; }
  html[data-motion=on] .concept-card.reveal.is-pending { translate:0 48px; rotate:.6deg; }
  html[data-motion=on] .closing-mark.is-active>span { animation:nx-dark-mark-orbit 7s var(--nx-ease-out) infinite; }
}

@keyframes nx-dark-line-enter { from{clip-path:inset(100% 0 0);transform:translateY(38px);opacity:.2;filter:blur(7px)} to{clip-path:inset(0);transform:translateY(0);opacity:1;filter:blur(0)} }
@keyframes nx-dark-canvas-enter { from{opacity:0;transform:perspective(1200px) rotateY(-13deg) rotateX(5deg) rotate(-5deg) translate3d(46px,52px,-80px);filter:blur(8px)} to{opacity:1;transform:rotate(-2deg) translate3d(calc(var(--nx-parallax-x)*.34),calc(var(--nx-parallax-y)*.34),0);filter:blur(0)} }
@keyframes nx-dark-brief-enter { from{opacity:0;transform:rotate(-14deg) translate3d(-42px,-48px,10px) scale(.88)} to{opacity:1;transform:rotate(-6deg) translate3d(calc(var(--nx-parallax-x)*-.68),calc(var(--nx-parallax-y)*-.68),36px) scale(1)} }
@keyframes nx-dark-token-enter { from{opacity:0;transform:rotate(13deg) translate3d(44px,45px,10px) scale(.9)} to{opacity:1;transform:rotate(5deg) translate3d(calc(var(--nx-parallax-x)*.62),calc(var(--nx-parallax-y)*.62),46px) scale(1)} }
@keyframes nx-dark-commit-enter { from{opacity:0;transform:rotate(-4deg) translate3d(-30px,20px,20px) scale(.92)} to{opacity:1;transform:rotate(-2deg) translate3d(calc(var(--nx-parallax-x)*-.35),calc(var(--nx-parallax-y)*-.35),52px) scale(1)} }
@keyframes nx-dark-panel-float { 0%,100%{translate:0 0} 50%{translate:0 -7px} }
@keyframes nx-dark-card-drift-a { 0%,100%{margin-top:0}50%{margin-top:-6px} }
@keyframes nx-dark-card-drift-b { 0%,100%{margin-bottom:0}50%{margin-bottom:7px} }
@keyframes nx-dark-halo-breathe { from{opacity:.62;scale:.97}to{opacity:1;scale:1.035} }
@keyframes nx-dark-status-pulse { 0%,100%{box-shadow:0 0 0 4px rgb(var(--nx-primary-rgb) / .06),0 0 12px rgb(var(--nx-primary-rgb) / .34)}50%{box-shadow:0 0 0 8px rgb(var(--nx-primary-rgb) / 0),0 0 22px rgb(var(--nx-primary-rgb) / .55)} }
@keyframes nx-dark-commit-glow { 0%,100%{border-color:rgba(52,211,153,.15)}50%{border-color:rgba(52,211,153,.38);box-shadow:0 18px 48px rgba(0,0,0,.6),0 0 30px rgba(52,211,153,.10)} }
@keyframes nx-dark-mark-orbit { 0%,22%,78%,100%{transform:translate3d(0,0,0) rotate(0);border-radius:1px}45%,55%{transform:translate3d(0,-7px,0) rotate(8deg);border-radius:13px} }

/* Motion disabled/reduced: eliminate dynamic perspective variables too. */
html[data-motion=off] .concept-card { --nx-tilt-x:0deg!important;--nx-tilt-y:0deg!important; }
@media(prefers-reduced-motion:reduce){
  body::before{background:linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);background-size:44px 44px}
  .hero-browser{transform:rotate(-2deg)!important}.brief-note{transform:rotate(-6deg)!important}.token-note{transform:rotate(5deg)!important}.commit-note{transform:rotate(-2deg)!important}.concept-art{transform:none!important}
}

@media(max-width:1150px){
  .site-header{padding-inline:36px}
  .product-notes{gap:20px}.product-notes>div{padding-right:18px}
}
@media(max-width:900px){
  .site-header{padding-inline:36px}.hero-browser{right:0}.brief-note{left:0}.token-note{right:0}
  .product-notes>div{padding:20px 16px 20px 44px}.product-notes>div>span{left:16px;top:23px}
}
@media(max-width:680px){
  body::before{background-size:auto,32px 32px,32px 32px;opacity:.8}
  .site-header{height:78px;padding-inline:20px}.site-header.is-scrolled{height:68px}.mobile-nav{top:68px}
  .hero{padding-top:52px}.hero h1,.hero-line-accent{letter-spacing:-4.2px}.hero-art{height:430px}
  .hero-browser{border-radius:12px}.brief-note,.token-note{border-radius:11px}
  .product-notes{gap:13px}.product-notes>div{padding:18px 16px 18px 42px}.product-notes>div>span{left:15px;top:21px}
  .concept-art{border-radius:13px;transform:none!important}.concept-card:hover .concept-art{transform:translateY(-5px)!important}
  .workflow-step:hover,.workflow-step[aria-selected=true]{padding-left:8px}
}

/* Root containment: transformed hero layers and reveal states must never create horizontal scroll. */
html,body { overflow-x:clip; max-width:100%; }
.hero { overflow:clip; }
@media (prefers-reduced-motion:no-preference) {
  html[data-motion=on] .principle-rows article.reveal.is-pending { translate:0 34px; }
}

/* ========================================================================== 
   Nexora Black SaaS System v4 — compact geometry + connected motion language
   ========================================================================== */
:root {
  --nx-surface-0:#010101;
  --nx-surface-1:#030304;
  --nx-surface-2:#060608;
  --nx-surface-3:#09090c;
  --nx-black:#000;
  --nx-mag-x:0px;
  --nx-mag-y:0px;
}
html,body { background:#000; }
body::before {
  background:
    radial-gradient(620px circle at var(--nx-pointer-x,68%) var(--nx-pointer-y,12%),rgb(var(--nx-primary-deep-rgb) / .065),transparent 58%),
    radial-gradient(520px circle at 16% 62%,rgb(var(--nx-secondary-rgb) / .022),transparent 62%),
    linear-gradient(rgba(255,255,255,.009) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.009) 1px,transparent 1px);
  background-size:auto,auto,48px 48px,48px 48px;
  opacity:.8;
}
body::after { opacity:.018; }
.container { width:min(1180px,calc(100% - 80px)); }

/* Compact chrome and controls. */
.site-header { height:74px; padding-inline:max(28px,calc((100vw - 1260px)/2)); }
.site-header.is-scrolled { height:62px; }
.brand>span { font-size:27px; }
.brand-symbol { width:25px; height:25px; }
.header-actions { gap:12px; }
.button { min-height:46px; padding:14px 19px; gap:22px; font-size:14px; transform:translate3d(var(--nx-mag-x),var(--nx-mag-y),0); }
.button:hover { transform:translate3d(var(--nx-mag-x),calc(var(--nx-mag-y) - 2px),0); }
.button-small { min-height:39px; padding:10px 15px; font-size:12px; }

/* Hero: smaller physical footprint, same message hierarchy. */
.hero {
  min-height:min(720px,calc(100svh - 74px));
  grid-template-columns:.94fr 1.06fr;
  gap:20px;
  padding-block:58px 72px;
}
.hero-copy { padding-top:8px; transition:translate .16s linear; }
.hero-copy>.eyebrow { margin-bottom:24px; }
.hero h1 { font-size:clamp(58px,5.85vw,88px); letter-spacing:-5.2px; max-width:560px; }
.hero-line-accent { letter-spacing:-5px; }
.hero-description { margin-top:24px; font-size:16px; line-height:1.68; }
.hero-actions { margin-top:28px; gap:20px; }
.hero-footnote { margin-top:24px; }
.hero-art { height:500px; transition:translate .16s linear; }
.hero::before { width:min(620px,52vw); height:min(620px,52vw); right:-13%; top:-26%; background:radial-gradient(circle,rgb(var(--nx-primary-deep-rgb) / .09),rgb(var(--nx-secondary-rgb) / .018) 38%,transparent 70%); }
.hero-halo { inset:32px -18px 18px -24px; opacity:.72; }
.hero-browser { top:88px; left:20px; right:-10px; border-radius:13px; background:rgba(2,2,3,.95); }
.browser-chrome { height:34px; }
.hero-browser-body { height:292px; padding:18px 22px; background-size:22px 22px,22px 22px,auto,auto; }
.mini-site-content { padding-top:23px; }
.mini-site-content h2 { font-size:33px; }
.mini-site-content h2 em { font-size:34px; }
.sculpture { height:165px; top:74px; }
.brief-note { top:23px; left:-2px; width:202px; padding:15px 18px; }
.brief-note p { font-size:19px; margin-top:13px; }
.token-note { width:204px; right:-3px; bottom:26px; padding:16px 18px; }
.token-swatches { margin:13px 0 10px; }
.token-swatches i { width:27px; height:27px; }
.commit-note { left:22px; bottom:37px; padding:11px 13px; }
.annotation-arrow { width:112px; left:-13px; bottom:1px; }
.annotation-text { left:74px; bottom:-6px; font-size:10px; }

/* Hero connective motion details. */
.hero-art::before,
.hero-art::after {
  content:'';
  position:absolute;
  pointer-events:none;
  z-index:-1;
}
.hero-art::before {
  width:280px;height:280px;right:5%;top:17%;border-radius:50%;
  border:1px solid rgb(var(--nx-primary-rgb) / .10);
  box-shadow:0 0 0 34px rgb(var(--nx-primary-rgb) / .015),0 0 0 72px rgb(var(--nx-secondary-rgb) / .009);
}
.hero-art::after {
  left:4%;right:2%;top:53%;height:1px;
  background:linear-gradient(90deg,transparent,rgb(var(--nx-primary-rgb) / .26),rgb(var(--nx-secondary-rgb) / .20),transparent);
  transform-origin:center;
}
.hero-browser::after {
  content:'';position:absolute;left:-20%;top:0;width:28%;height:100%;pointer-events:none;z-index:6;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.028),rgb(var(--nx-primary-rgb) / .08),transparent);
  transform:skewX(-13deg) translateX(-160%);
}
.hero-browser-body::after {
  content:'';position:absolute;left:0;right:0;top:-2px;height:1px;z-index:8;pointer-events:none;
  background:linear-gradient(90deg,transparent 8%,rgb(var(--nx-secondary-rgb) / .0),rgb(var(--nx-secondary-rgb) / .42),rgb(var(--nx-primary-rgb) / .25),transparent 92%);
  box-shadow:0 0 18px rgb(var(--nx-secondary-rgb) / .18);
}

.principle-strip { padding:19px 0; margin-bottom:72px; }

/* Shared section rhythm is intentionally tighter than the editorial baseline. */
.section-heading { margin:30px 0 38px; }
.section-heading h2,.principles-copy h2,.faq-intro h2 { font-size:clamp(36px,4vw,58px); }
.section-heading>p { font-size:14px; }
.workspace-section { padding-bottom:72px; }

/* Studio: compact app-window proportions. */
.studio { border-radius:13px; position:relative; isolation:isolate; }
.studio::before {
  content:'';position:absolute;inset:0;z-index:8;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg,transparent 15%,rgb(var(--nx-primary-rgb) / .08) 45%,rgb(var(--nx-secondary-rgb) / .05) 54%,transparent 78%);
  transform:translateX(-135%);opacity:.65;
}
.studio-toolbar { height:61px; padding-inline:18px; }
.project-icon { padding:7px 9px; }
.studio-body { grid-template-columns:205px 1fr; min-height:462px; }
.studio-sidebar { padding:17px 14px; }
.studio-tabs button { padding:9px 10px; }
.inspector { padding:25px 6px 0; }
.inspector h3 { font-size:19px; margin:11px 0 9px; }
.studio-panel { padding:27px; min-height:0; }
.preview-surface { max-width:760px; }
.sample-site { padding:24px 27px; }
.sample-grid { margin:30px 0 35px; }
.sample-art { height:190px; }
.studio-status { padding:13px 18px; }
.product-notes { gap:18px; margin-top:30px; }
.product-notes>div { padding:19px 18px 19px 43px; border-radius:10px; }
.product-notes>div>span { left:16px; top:22px; }

.studio-panel::after {
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(270px circle at var(--nx-studio-x,50%) var(--nx-studio-y,45%),rgb(var(--nx-primary-rgb) / .075),transparent 68%);
  opacity:.85;
}
.studio-panel>* { position:relative; z-index:1; }

/* Workflow gets a smaller stage with an animated hand-off rail. */
.workflow-section { padding-block:40px 84px; }
.workflow-layout { gap:54px; }
.workflow-step { padding:20px 0; gap:19px; }
.workflow-step strong { font-size:18px; }
.workflow-step small { margin-top:7px; }
.workflow-scene { height:304px; }
.workflow-scene::after {
  content:'';position:absolute;inset:-45%;pointer-events:none;
  background:conic-gradient(from 180deg,transparent 0 38%,rgb(var(--nx-primary-rgb) / .055) 45%,rgb(var(--nx-secondary-rgb) / .045) 50%,transparent 58% 100%);
  opacity:.8;
}
.workflow-scene>* { position:relative; z-index:1; }
.workflow-step::after {
  content:'';position:absolute;left:0;bottom:-1px;width:0;height:1px;
  background:linear-gradient(90deg,var(--nx-violet),var(--nx-cyan),transparent);
  box-shadow:0 0 15px rgb(var(--nx-primary-rgb) / .28);
  transition:width .55s var(--nx-ease-out);
}
.workflow-step[aria-selected=true]::after { width:82%; }

/* Foundation section is denser without shrinking its readable copy. */
.principles-section { padding-block:70px 76px; }
.principles-layout { gap:70px; }
.principles-copy>.eyebrow { margin-bottom:29px; }
.principles-copy h2 { font-size:49px; }
.principles-copy>p:not(.eyebrow) { margin-top:23px; }
.principle-rows article { padding:20px 0; gap:19px; position:relative; overflow:hidden; }
.principle-rows article::after {
  content:'';position:absolute;left:-45%;bottom:0;width:32%;height:1px;
  background:linear-gradient(90deg,transparent,var(--nx-violet-2),var(--nx-cyan),transparent);
  opacity:0;
}
.principle-icon { font-size:24px; }
.principle-rows h3 { font-size:18px; margin-bottom:8px; }

/* Concept cards: smaller final state + scroll-linked convergence/deck choreography. */
.possibilities-section { padding-block:76px 70px; overflow:clip; }
.concept-grid { gap:18px; position:relative; isolation:isolate; }
.concept-grid::before {
  content:'';position:absolute;left:7%;right:7%;top:43%;height:1px;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgb(var(--nx-primary-rgb) / .34),rgb(var(--nx-secondary-rgb) / .26),transparent);
  opacity:var(--nx-stack-intensity,0);transform:scaleX(var(--nx-stack-intensity,0));
  box-shadow:0 0 35px rgb(var(--nx-primary-rgb) / .16);
}
.concept-card {
  transform:translate3d(var(--nx-stack-x,0px),var(--nx-stack-y,0px),0) rotate(var(--nx-stack-r,0deg)) scale(var(--nx-stack-s,1));
  transform-origin:center 45%;
  transition:filter .2s ease,box-shadow .2s ease;
  will-change:transform;
}
.concept-card.nx-stacking { filter:saturate(1.07) brightness(1.03); }
.concept-art { height:322px; padding:19px 18px; border-radius:13px; }
.concept-word { top:194px; left:18px; font-size:34px; }
.concept-art-footer { left:18px; right:18px; bottom:18px; }
.concept-creative-shape { top:60px; height:120px; }
.concept-vase { top:60px; height:118px; }
.concept-chart { top:62px; height:113px; }
.concept-info { padding-top:15px; }
.concept-info strong { font-size:13px; }
.concept-info small { margin-top:5px; }
.concept-card::before {
  content:'';position:absolute;inset:-1px;z-index:-1;border-radius:15px;pointer-events:none;
  background:linear-gradient(135deg,rgb(var(--nx-primary-rgb) / .0),rgb(var(--nx-primary-rgb) / .22),rgb(var(--nx-secondary-rgb) / .10),rgb(var(--nx-tertiary-rgb) / .0));
  opacity:calc(var(--nx-stack-intensity,0) * .7);filter:blur(20px);
}

/* FAQ / close: lower vertical density and stronger active feedback. */
.faq-section { gap:62px; padding-block:34px 78px; }
.faq-intro .eyebrow { margin-bottom:24px; }
.faq-intro h2 { font-size:43px; }
.faq-intro p:last-child { margin-top:20px; }
.faq-list summary { padding:18px 0; }
.faq-list details>div { padding-bottom:19px; }
.faq-list details[open] { background:linear-gradient(90deg,rgb(var(--nx-primary-rgb) / .035),transparent 70%); }

.closing-section { padding-block:60px 64px; }
.closing-layout { gap:56px; }
.closing-layout .eyebrow { margin-bottom:22px; }
.closing-layout h2 { font-size:clamp(43px,4.8vw,66px); }
.closing-layout .button { margin-top:27px; }
.closing-mark { width:188px; height:188px; }
.site-footer { padding-block:36px 19px; }
.footer-top { padding-bottom:29px; }

/* Pointer-reactive studio surface and magnetic links. */
.text-link { transform:translate3d(var(--nx-mag-x,0px),var(--nx-mag-y,0px),0); transition:color .25s ease,transform .24s var(--nx-ease-out); }

@media (prefers-reduced-motion:no-preference) {
  html[data-motion=on] body::before { animation:nx-v4-grid-drift 18s linear infinite alternate; }
  html[data-motion=on] .hero-art::before { animation:nx-v4-orbit-ring 16s linear infinite; }
  html[data-motion=on] .hero-art::after { animation:nx-v4-connector 5.8s ease-in-out infinite; }
  html[data-motion=on] .hero-browser::after { animation:nx-v4-browser-sweep 7.5s var(--nx-ease-out) 1.8s infinite; }
  html[data-motion=on] .hero-browser-body::after { animation:nx-v4-scanline 5.4s ease-in-out 1.2s infinite; }
  html[data-motion=on] .studio.nx-section-active::before { animation:nx-v4-surface-sweep 6.2s var(--nx-ease-out) infinite; }
  html[data-motion=on] .workflow-section.nx-section-active .workflow-scene::after { animation:nx-v4-workflow-orbit 13s linear infinite; }
  html[data-motion=on] .principles-section.nx-section-active .principle-rows article::after { animation:nx-v4-row-sweep 4.8s var(--nx-ease-out) infinite; }
  html[data-motion=on] .principles-section.nx-section-active .principle-rows article:nth-child(2)::after{animation-delay:.4s}
  html[data-motion=on] .principles-section.nx-section-active .principle-rows article:nth-child(3)::after{animation-delay:.8s}
  html[data-motion=on] .principles-section.nx-section-active .principle-rows article:nth-child(4)::after{animation-delay:1.2s}
  html[data-motion=on] .concept-card.nx-stacking .concept-art { box-shadow:0 40px 100px rgba(0,0,0,.72),0 0 46px rgb(var(--nx-primary-rgb) / .08),inset 0 1px rgba(255,255,255,.045); }
  html[data-motion=on] .nx-section-active .section-heading h2 { animation:nx-v4-heading-focus .8s var(--nx-ease-out) both; }
}

@keyframes nx-v4-grid-drift { from{background-position:0 0,0 0,0 0,0 0} to{background-position:30px -18px,-20px 26px,48px 48px,48px 48px} }
@keyframes nx-v4-orbit-ring { to{transform:rotate(360deg) scale(1.025)} }
@keyframes nx-v4-connector { 0%,100%{opacity:.18;transform:scaleX(.74)} 45%,58%{opacity:.9;transform:scaleX(1)} }
@keyframes nx-v4-browser-sweep { 0%,62%{transform:skewX(-13deg) translateX(-160%);opacity:0} 74%{opacity:1} 92%,100%{transform:skewX(-13deg) translateX(520%);opacity:0} }
@keyframes nx-v4-scanline { 0%,100%{top:3%;opacity:0} 12%{opacity:.8} 70%{top:94%;opacity:.35} 84%,100%{opacity:0} }
@keyframes nx-v4-surface-sweep { 0%,58%{transform:translateX(-135%);opacity:0} 70%{opacity:.62} 92%,100%{transform:translateX(135%);opacity:0} }
@keyframes nx-v4-workflow-orbit { to{transform:rotate(360deg)} }
@keyframes nx-v4-row-sweep { 0%,72%{left:-45%;opacity:0} 78%{opacity:.8} 100%{left:112%;opacity:0} }
@keyframes nx-v4-heading-focus { from{filter:blur(5px);opacity:.55;letter-spacing:-2px} to{filter:blur(0);opacity:1} }

/* Tablet tuning. */
@media(max-width:1150px){
  .container{width:calc(100% - 64px)}
  .site-header{padding-inline:32px}
  .hero{min-height:650px;padding-block:50px 62px}
  .hero h1{font-size:74px;letter-spacing:-4.2px}.hero-line-accent{letter-spacing:-4px}
  .hero-art{height:455px}.hero-browser{top:82px}.hero-browser-body{height:265px}
  .brief-note{width:180px}.token-note{width:185px}.studio-body{grid-template-columns:190px 1fr;min-height:430px}
  .studio-panel{padding:22px}.workflow-layout{gap:38px}.concept-art{height:292px}.concept-word{top:174px;font-size:31px}
}

@media(max-width:900px){
  .container{width:calc(100% - 52px)}
  .hero{min-height:610px}.hero h1{font-size:68px}
  .studio-body{grid-template-columns:184px 1fr}.principles-layout{gap:46px}.principles-copy h2{font-size:43px}
  .concept-art{height:276px}.concept-word{top:163px;font-size:29px}
  .concept-card{--nx-stack-x:0px!important;--nx-stack-y:0px!important;--nx-stack-r:0deg!important;--nx-stack-s:1!important}
  .concept-grid::before{display:none}
}

/* Phone: compact, readable, and no scroll-linked overlap. */
@media(max-width:680px){
  .container{width:calc(100% - 34px)}
  body::before{background-size:auto,auto,34px 34px,34px 34px}
  .site-header{height:66px;padding-inline:17px}.site-header.is-scrolled{height:58px}.mobile-nav{top:58px}
  .brand>span{font-size:23px}.brand-symbol{width:22px;height:22px}
  .hero{padding-top:38px;padding-bottom:34px;gap:8px}.hero-copy{padding-top:0}
  .hero-copy>.eyebrow{margin-bottom:19px}.hero h1{font-size:clamp(54px,14.4vw,76px);letter-spacing:-3.5px;line-height:.99}.hero-line-accent{letter-spacing:-3.5px}
  .hero-description{font-size:14px;margin-top:20px}.hero-actions{margin-top:21px;gap:15px}.hero-actions>.button{min-height:44px;padding:13px 15px;font-size:11px}.hero-footnote{margin-top:17px}
  .hero-art{height:345px;margin-top:5px}.hero-browser{top:80px;right:2px}.hero-browser-body{height:193px;padding:13px 16px}.browser-chrome{height:26px}
  .mini-site-content{padding-top:16px}.mini-site-content h2{font-size:24px}.mini-site-content h2 em{font-size:25px}.sculpture{height:106px;top:58px}
  .brief-note{top:14px;width:143px;padding:10px 12px}.brief-note p{font-size:16px;margin-top:8px}.token-note{width:147px;bottom:3px;padding:11px 12px}.token-swatches{margin:9px 0 7px}.token-swatches i{width:21px;height:21px}.commit-note{left:6px;bottom:19px;padding:8px 9px}
  .principle-strip{padding:18px 0;margin-bottom:48px}
  .section-heading{margin:21px 0 25px}.section-heading h2,.faq-intro h2{font-size:36px}.section-heading>p{font-size:12.5px;margin-top:16px}
  .workspace-section{padding-bottom:44px}.studio-toolbar{height:56px}.studio-sidebar{padding:9px 12px 13px}.inspector{padding-top:14px;min-height:98px}.inspector h3{font-size:17px}.studio-panel{padding:13px;min-height:292px}.sample-site{padding:17px 18px}.sample-grid{margin:21px 0 22px}.sample-art{height:118px}.sample-copy h3{font-size:29px}.studio-status{padding:10px 12px}.product-notes{gap:12px;margin-top:22px}.product-notes>div{padding:15px 13px 15px 39px}
  .workflow-section{padding-top:21px;padding-bottom:52px}.workflow-layout{gap:21px}.workflow-step{padding:17px 0}.workflow-step strong{font-size:16px}.workflow-scene{height:258px}
  .principles-section{padding:50px 0 47px}.principles-copy h2{font-size:36px}.principle-rows{margin-top:30px}.principle-rows article{padding:18px 0}
  .possibilities-section{padding:51px 0 48px}.concept-grid{gap:25px}.concept-art{height:300px;padding:19px}.concept-word{top:186px;left:19px;font-size:34px}.concept-creative-shape{top:64px;height:108px}.concept-vase{top:66px;height:112px}.concept-chart{top:68px;height:106px}.concept-info{padding-top:13px}.concept-info strong{font-size:14px}.concept-info small{font-size:10px}
  .faq-section{padding-top:29px;padding-bottom:50px}.faq-intro h2{font-size:36px}.faq-list{margin-top:24px}.faq-list summary{padding-block:17px;font-size:13px}
  .closing-section{padding-block:46px 48px}.closing-layout h2{font-size:39px}.closing-layout .button{margin-top:22px}.site-footer{padding-top:29px}
  .button,.text-link{--nx-mag-x:0px!important;--nx-mag-y:0px!important}
}

@media(max-width:359px){
  .container{width:calc(100% - 28px)}
  .hero h1{font-size:52px}.hero-art{height:326px}.hero-browser-body{height:184px}
  .concept-art{height:282px}.concept-word{top:174px;font-size:32px}
}

@media(prefers-reduced-motion:reduce){
  .concept-card{transform:none!important}.concept-grid::before{display:none}.hero-copy,.hero-art{translate:0 0!important}
  .hero-art::before,.hero-art::after,.hero-browser::after,.hero-browser-body::after,.studio::before,.workflow-scene::after,.principle-rows article::after{animation:none!important}
}
html[data-motion=off] .concept-card{transform:none!important}
html[data-motion=off] .concept-grid::before{display:none}


/* ==========================================================================
   Nexora v5 final refinement — pure-black canvas, connected motion, clean hero
   ========================================================================== */
/* Legacy aliases inherit the selected page theme. */
:root{
  --orange:var(--nx-primary);--orange-strong:var(--nx-primary-deep);--accent-ink:var(--nx-primary-light);
  --orange-light:rgb(var(--nx-primary-rgb) / .24);--nx-violet:var(--nx-primary);--nx-violet-2:var(--nx-primary-light);
  --nx-cyan:var(--nx-secondary);--nx-blue:var(--nx-secondary-deep);--nx-pink:var(--nx-tertiary);
  --nx-glow-violet:rgb(var(--nx-primary-rgb) / .16);--nx-glow-cyan:rgb(var(--nx-secondary-rgb) / .10);
}
html,body{background:#000!important}
body::before{
  background:
    linear-gradient(rgba(255,255,255,.006) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.006) 1px,transparent 1px)!important;
  background-size:48px 48px!important;
  opacity:.54!important;
  mask-image:linear-gradient(to bottom,#000 0,#000 56%,transparent 92%)!important;
  animation:none!important;
}
body::after{opacity:.012!important;mix-blend-mode:normal!important}
.nx-scroll-progress{background:linear-gradient(90deg,var(--nx-primary),var(--nx-secondary))!important;box-shadow:0 0 14px rgb(var(--nx-primary-rgb) / .24)!important}
::selection{background:rgb(var(--nx-primary-rgb) / .32)!important}

/* Compact four-gradient chooser. It replaces the nonessential animation toggle. */
.theme-switcher{display:flex;align-items:center;gap:6px;padding:5px;border:1px solid rgba(255,255,255,.10);border-radius:10px;background:#050506;box-shadow:inset 0 1px rgba(255,255,255,.035)}
.theme-swatch{position:relative;width:22px;height:22px;padding:0;border:1px solid rgba(255,255,255,.14);border-radius:6px;transition:transform .24s var(--nx-ease-out),border-color .24s,box-shadow .24s;overflow:hidden}
.theme-swatch::before{content:'';position:absolute;inset:3px;border-radius:3px;background:var(--swatch);transition:transform .24s var(--nx-ease-out)}
.theme-swatch:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.30)}
.theme-swatch:hover::before{transform:scale(1.08)}
.theme-swatch[aria-pressed=true]{border-color:rgba(255,255,255,.55);box-shadow:0 0 0 2px #000,0 0 0 3px rgb(var(--nx-primary-rgb) / .62)}
.theme-swatch-violet{--swatch:linear-gradient(135deg,#8b5cf6,#22d3ee)}
.theme-swatch-ocean{--swatch:linear-gradient(135deg,#2563eb,#14b8a6)}
.theme-swatch-ember{--swatch:linear-gradient(135deg,#f97316,#facc15)}
.theme-swatch-mint{--swatch:linear-gradient(135deg,#10b981,#84cc16)}

/* Selected theme propagates through all global accents while the product-demo palette remains independently explorable. */
.brand-symbol{fill:var(--nx-primary)!important;filter:drop-shadow(0 0 10px rgb(var(--nx-primary-rgb) / .20))!important}
.desktop-nav a::after{background:linear-gradient(90deg,var(--nx-primary),var(--nx-secondary))!important}
.button-orange{background:linear-gradient(135deg,var(--nx-primary-deep),var(--nx-primary-dark) 58%,var(--nx-primary-darker))!important;border-color:rgb(var(--nx-primary-pale-rgb) / .28)!important;box-shadow:0 14px 38px rgb(var(--nx-primary-dark-rgb) / .22),inset 0 1px rgba(255,255,255,.13)!important}
.button-orange:hover{background:linear-gradient(135deg,var(--nx-primary),var(--nx-primary-hover) 55%,var(--nx-primary-dark))!important;box-shadow:0 17px 44px rgb(var(--nx-primary-deep-rgb) / .28),0 0 0 1px rgb(var(--nx-primary-light-rgb) / .12)!important}
.button-dark:hover{border-color:rgb(var(--nx-primary-light-rgb) / .25)!important;box-shadow:0 15px 40px rgba(0,0,0,.5),0 0 28px rgb(var(--nx-primary-rgb) / .065)!important}
.status-dot{background:var(--nx-primary)!important;box-shadow:0 0 0 4px rgb(var(--nx-primary-rgb) / .06),0 0 12px rgb(var(--nx-primary-rgb) / .30)!important}
.demo-label .status-dot,.studio-status .status-dot{background:#34d399!important;box-shadow:0 0 12px rgba(52,211,153,.42)!important}
.hero-line-accent{background:linear-gradient(90deg,#fff 0%,var(--nx-primary-pale) 28%,var(--nx-primary) 62%,var(--nx-secondary-light) 105%)!important;-webkit-background-clip:text!important;background-clip:text!important;filter:drop-shadow(0 10px 30px rgb(var(--nx-primary-rgb) / .08))!important}

/* Pure black around the hero. Accent light is localized to components instead of flooding the page. */
.hero::before{width:min(560px,46vw)!important;height:min(560px,46vw)!important;right:-10%!important;top:-23%!important;background:radial-gradient(circle,rgb(var(--nx-primary-rgb) / .052),transparent 66%)!important;filter:blur(22px)!important}
.hero-halo{inset:46px 2px 42px 8px!important;background:radial-gradient(ellipse at 61% 50%,rgb(var(--nx-primary-rgb) / .085),transparent 54%),radial-gradient(ellipse at 82% 62%,rgb(var(--nx-secondary-rgb) / .035),transparent 42%)!important;filter:blur(23px)!important;opacity:.62!important}
.hero-art::before{width:248px!important;height:248px!important;right:8%!important;top:20%!important;border-color:rgb(var(--nx-primary-rgb) / .07)!important;box-shadow:0 0 0 32px rgb(var(--nx-primary-rgb) / .009),0 0 0 67px rgb(var(--nx-secondary-rgb) / .006)!important;animation:none!important}
.hero-art::after{left:7%!important;right:5%!important;top:52%!important;background:linear-gradient(90deg,transparent,rgb(var(--nx-primary-rgb) / .12),rgb(var(--nx-secondary-rgb) / .09),transparent)!important;opacity:.45!important;animation:none!important}

/* Hero composition: deterministic zones prevent the commit/annotation collision seen in v4. */
.hero-art{height:500px!important;isolation:isolate}
.hero-browser{top:88px!important;left:24px!important;right:8px!important;border-color:rgba(255,255,255,.125)!important;box-shadow:0 28px 90px rgba(0,0,0,.74),0 0 0 1px rgb(var(--nx-primary-rgb) / .025),0 0 52px rgb(var(--nx-primary-rgb) / .045)!important}
.hero-browser::after,.hero-browser-body::after{display:none!important;animation:none!important}
.hero-browser-body{background:linear-gradient(rgba(255,255,255,.021) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.021) 1px,transparent 1px),radial-gradient(circle at 77% 44%,rgb(var(--nx-primary-rgb) / .075),transparent 32%),#040405!important;background-size:22px 22px,22px 22px,auto,auto!important}
.window-dots i:first-child{background:var(--nx-primary-deep)!important}
.mini-site-content h2 em{color:var(--nx-primary-light)!important}
.sculpture-block{background:linear-gradient(135deg,var(--nx-primary-light),var(--nx-primary-deep) 54%,var(--nx-secondary-deep) 120%)!important;box-shadow:inset 4px 4px 12px rgba(255,255,255,.13),inset -7px -8px 18px rgb(var(--nx-primary-darker-rgb) / .24),0 16px 28px rgb(var(--nx-primary-dark-rgb) / .14)!important}
.sculpture-shadow{background:rgb(var(--nx-primary-deep-rgb) / .13)!important}
.brief-note{top:24px!important;left:3px!important;width:200px!important;background:linear-gradient(145deg,rgba(14,14,18,.97),rgba(5,5,7,.97))!important;border-color:rgb(var(--nx-primary-light-rgb) / .15)!important;box-shadow:0 20px 52px rgba(0,0,0,.60),inset 0 1px rgba(255,255,255,.045)!important}
.note-heading{color:var(--nx-primary-light)!important}
.token-note{width:202px!important;right:2px!important;bottom:25px!important;background:linear-gradient(145deg,rgba(10,10,13,.98),rgba(4,4,5,.98))!important;border-color:rgb(var(--nx-secondary-rgb) / .12)!important;box-shadow:0 20px 52px rgba(0,0,0,.62),inset 0 1px rgba(255,255,255,.04)!important}
.token-swatches i{background:var(--nx-primary)!important;box-shadow:0 0 15px rgb(var(--nx-primary-rgb) / .11)!important}.token-swatches i:nth-child(2){background:var(--nx-secondary)!important}.token-swatches i:nth-child(3){background:#15151c!important}.token-swatches i:nth-child(4){background:#f5f5f7!important}
.commit-note{left:30px!important;bottom:51px!important;max-width:210px!important;padding:10px 12px!important;transform:rotate(-1deg) translate3d(calc(var(--nx-parallax-x)*-.28),calc(var(--nx-parallax-y)*-.28),52px)!important}
.annotation-arrow{left:4px!important;bottom:-24px!important;width:84px!important;height:60px!important;stroke:var(--nx-primary-light)!important;opacity:.42!important;z-index:2!important}
.annotation-text{left:96px!important;bottom:-14px!important;max-width:118px!important;color:var(--nx-primary-light)!important;font-size:9px!important;line-height:1.15!important;letter-spacing:.35px!important;transform:rotate(-3deg)!important;z-index:2!important}
.annotation-arrow path{stroke-dasharray:190;stroke-dashoffset:0}

/* Remove the repeated scan/sweep/orbit effects. Motion is now finite, staged and connected. */
.studio::before,.workflow-scene::after,.principle-rows article::after{animation:none!important}
.studio::before{opacity:.28!important;background:linear-gradient(115deg,transparent 18%,rgb(var(--nx-primary-rgb) / .035) 47%,rgb(var(--nx-secondary-rgb) / .025) 53%,transparent 78%)!important;transform:translateX(-128%)!important}
.workflow-scene::after{opacity:.22!important;background:radial-gradient(circle at 50% 50%,rgb(var(--nx-primary-rgb) / .035),transparent 58%)!important;inset:0!important}
.principle-rows article::after{display:none!important}
.nx-section-active .section-heading h2{animation:none!important}

/* Theme-aware global surfaces without broad color washes. */
.section-heading h2 em,.principles-copy h2 em,.faq-intro h2 em,.closing-layout h2 em{color:var(--nx-primary-light)!important}
.principle-strip i,.strip-mark,.product-notes>div>span,.principle-icon,.faq-list summary>span{color:var(--nx-primary-light)!important}
.project-icon{background:var(--nx-primary-deep)!important;box-shadow:0 0 18px rgb(var(--nx-primary-deep-rgb) / .13)!important}
.studio{box-shadow:0 32px 105px rgba(0,0,0,.78),0 0 0 1px rgb(var(--nx-primary-rgb) / .018)!important}
.studio-panel{background-image:linear-gradient(rgba(255,255,255,.029) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.029) 1px,transparent 1px)!important;background-size:22px 22px!important}
.studio-panel::after{background:radial-gradient(260px circle at var(--nx-studio-x,50%) var(--nx-studio-y,45%),rgb(var(--nx-primary-rgb) / .045),transparent 68%)!important;opacity:.72!important}
.product-notes>div:hover{border-color:rgb(var(--nx-primary-rgb) / .16)!important}
.workflow-step[aria-selected=true]{color:var(--nx-primary-pale)!important;background:linear-gradient(90deg,rgb(var(--nx-primary-rgb) / .055),transparent 78%)!important;border-color:rgb(var(--nx-primary-rgb) / .10)!important}
.workflow-step::after{background:linear-gradient(90deg,var(--nx-primary),var(--nx-secondary),transparent)!important;box-shadow:0 0 10px rgb(var(--nx-primary-rgb) / .16)!important}
.workflow-scene::before{background-image:radial-gradient(rgb(var(--nx-primary-light-rgb) / .15) 1px,transparent 1px)!important;opacity:.18!important}
.principles-section{background:radial-gradient(520px circle at 12% 36%,rgb(var(--nx-primary-rgb) / .035),transparent 60%),#000!important}
.principle-rows article:hover{background:linear-gradient(90deg,rgb(var(--nx-primary-rgb) / .035),transparent 78%)!important;border-color:rgb(var(--nx-primary-rgb) / .10)!important}
.concept-grid::before{background:linear-gradient(90deg,transparent,rgb(var(--nx-primary-rgb) / .18),rgb(var(--nx-secondary-rgb) / .14),transparent)!important;box-shadow:0 0 24px rgb(var(--nx-primary-rgb) / .08)!important}
.concept-card::before{background:linear-gradient(135deg,transparent,rgb(var(--nx-primary-rgb) / .12),rgb(var(--nx-secondary-rgb) / .065),transparent)!important}
.concept-card:hover .concept-art{border-color:rgb(var(--nx-primary-light-rgb) / .14)!important;box-shadow:0 32px 80px rgba(0,0,0,.65),0 0 34px rgb(var(--nx-primary-rgb) / .025)!important}
.concept-creative-shape i{border-color:var(--nx-primary-deep)!important}.concept-creative-shape i:nth-child(2){border-color:var(--nx-primary)!important}.concept-creative-shape i:nth-child(3){border-color:var(--nx-primary-light)!important}
.concept-card:hover .concept-arrow{background:var(--nx-primary-deep)!important;border-color:var(--nx-primary)!important;box-shadow:0 0 18px rgb(var(--nx-primary-deep-rgb) / .13)!important}
.faq-list details[open]{background:linear-gradient(90deg,rgb(var(--nx-primary-rgb) / .018),transparent 70%)!important}
.closing-section{background:radial-gradient(520px circle at 84% 50%,rgb(var(--nx-primary-rgb) / .055),transparent 58%),#000!important}
.closing-mark>span{background:linear-gradient(135deg,var(--nx-primary-deep),var(--nx-secondary-deep))!important}
.footer-top nav a:hover,.back-top:hover{color:var(--nx-primary-light)!important}
.code-view .code-key{color:var(--nx-primary-light)!important}.code-view .code-value{color:var(--nx-secondary-light)!important}

/* Preserve the product-demo's own three palettes; the header chooser controls the landing-page shell. */
.palette-controls button span{background:#8b5cf6!important}.palette-controls button[data-palette=sage] span{background:#22d3ee!important}.palette-controls button[data-palette=ink] span{background:#f472b6!important}
.preview-surface{--scene-bg:#060609!important;--scene-ink:#f2f2f6!important;--scene-accent:#8b5cf6!important}
.preview-surface[data-palette=sage]{--scene-bg:#041012!important;--scene-ink:#effdff!important;--scene-accent:#22d3ee!important}
.preview-surface[data-palette=ink]{--scene-bg:#0c0710!important;--scene-ink:#fff5fb!important;--scene-accent:#f472b6!important}

/* Hero load choreography: brief -> canvas -> confirmation -> tokens -> handoff annotation. */
@media(prefers-reduced-motion:no-preference){
  html[data-motion=on] .hero-copy>.eyebrow{animation:nx-v5-copy-in .56s var(--nx-ease-out) .04s both}
  html[data-motion=on] .hero-line:nth-child(1){animation:nx-v5-copy-in .72s var(--nx-ease-out) .10s both}
  html[data-motion=on] .hero-line:nth-child(2){animation:nx-v5-copy-in .72s var(--nx-ease-out) .17s both}
  html[data-motion=on] .hero-line:nth-child(3){animation:nx-v5-copy-in .78s var(--nx-ease-out) .24s both}
  html[data-motion=on] .hero-description{animation:nx-v5-copy-in .64s var(--nx-ease-out) .31s both}
  html[data-motion=on] .hero-actions{animation:nx-v5-copy-in .64s var(--nx-ease-out) .38s both}
  html[data-motion=on] .hero-footnote{animation:nx-v5-copy-in .64s var(--nx-ease-out) .45s both}
  html[data-motion=on] .hero-art.is-active .brief-note{animation:nx-v5-note-in .70s var(--nx-ease-out) .10s both}
  html[data-motion=on] .hero-art.is-active .hero-browser{animation:nx-v5-canvas-in .86s var(--nx-ease-out) .22s both}
  html[data-motion=on] .hero-art.is-active .sculpture .block-one{animation:nx-v5-piece-1 .62s var(--nx-ease-out) .58s both}
  html[data-motion=on] .hero-art.is-active .sculpture .block-two{animation:nx-v5-piece-2 .62s var(--nx-ease-out) .66s both}
  html[data-motion=on] .hero-art.is-active .sculpture .block-three{animation:nx-v5-piece-3 .62s var(--nx-ease-out) .74s both}
  html[data-motion=on] .hero-art.is-active .sculpture .block-four{animation:nx-v5-piece-4 .62s var(--nx-ease-out) .82s both}
  html[data-motion=on] .hero-art.is-active .commit-note{animation:nx-v5-commit-in .58s var(--nx-ease-out) .90s both}
  html[data-motion=on] .hero-art.is-active .token-note{animation:nx-v5-token-in .66s var(--nx-ease-out) 1.03s both}
  html[data-motion=on] .hero-art.is-active .annotation-arrow path{animation:nx-v5-line-draw .70s var(--nx-ease-out) 1.16s both}
  html[data-motion=on] .hero-art.is-active .annotation-text{animation:nx-v5-label-in .46s var(--nx-ease-out) 1.46s both}
  html[data-motion=on] .hero-art.is-active .commit-check{animation:nx-v5-confirm-pulse .62s var(--nx-ease-out) 1.30s both}
  html[data-motion=on] .concept-card.nx-stacking .concept-art{box-shadow:0 36px 92px rgba(0,0,0,.74),0 0 34px rgb(var(--nx-primary-rgb) / .04),inset 0 1px rgba(255,255,255,.04)!important}
}
@keyframes nx-v5-copy-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes nx-v5-note-in{from{opacity:0;transform:rotate(-8deg) translate3d(-18px,18px,36px) scale(.95)}to{opacity:1;transform:rotate(-6deg) translate3d(calc(var(--nx-parallax-x)*-.68),calc(var(--nx-parallax-y)*-.68),36px) scale(1)}}
@keyframes nx-v5-canvas-in{from{opacity:0;transform:rotate(-2.8deg) translate3d(calc(var(--nx-parallax-x)*.34),calc(28px + var(--nx-parallax-y)*.34),0) scale(.972)}to{opacity:1;transform:rotate(-2deg) translate3d(calc(var(--nx-parallax-x)*.34),calc(var(--nx-parallax-y)*.34),0) scale(1)}}
@keyframes nx-v5-piece-1{from{opacity:0;transform:translateY(18px) rotate(-35deg) scale(.88)}to{opacity:1;transform:rotate(-19deg)}}
@keyframes nx-v5-piece-2{from{opacity:0;transform:translateY(20px) rotate(-4deg) scale(.88)}to{opacity:1;transform:rotate(14deg)}}
@keyframes nx-v5-piece-3{from{opacity:0;transform:translateY(20px) rotate(-28deg) scale(.88)}to{opacity:1;transform:rotate(-14deg)}}
@keyframes nx-v5-piece-4{from{opacity:0;transform:translateY(18px) rotate(4deg) scale(.88)}to{opacity:1;transform:rotate(18deg)}}
@keyframes nx-v5-commit-in{from{opacity:0;transform:rotate(-1deg) translate3d(-10px,15px,52px) scale(.94)}to{opacity:1;transform:rotate(-1deg) translate3d(calc(var(--nx-parallax-x)*-.28),calc(var(--nx-parallax-y)*-.28),52px) scale(1)}}
@keyframes nx-v5-token-in{from{opacity:0;transform:rotate(7deg) translate3d(16px,18px,46px) scale(.95)}to{opacity:1;transform:rotate(5deg) translate3d(calc(var(--nx-parallax-x)*.62),calc(var(--nx-parallax-y)*.62),46px) scale(1)}}
@keyframes nx-v5-line-draw{from{stroke-dashoffset:190;opacity:0}to{stroke-dashoffset:0;opacity:1}}
@keyframes nx-v5-label-in{from{opacity:0;transform:translateY(7px) rotate(-3deg)}to{opacity:1;transform:translateY(0) rotate(-3deg)}}
@keyframes nx-v5-confirm-pulse{0%{transform:scale(.82);box-shadow:0 0 0 0 rgba(52,211,153,.0)}55%{transform:scale(1.08);box-shadow:0 0 0 8px rgba(52,211,153,.055)}100%{transform:scale(1);box-shadow:inset 0 0 0 1px rgba(52,211,153,.25)}}

/* Theme changes crossfade as one composition when the browser supports View Transitions. */
::view-transition-old(root),::view-transition-new(root){animation-duration:.30s;animation-timing-function:var(--nx-ease-out);mix-blend-mode:normal}
::view-transition-old(root){animation-name:nx-v5-theme-old}::view-transition-new(root){animation-name:nx-v5-theme-new}
@keyframes nx-v5-theme-old{to{opacity:0;filter:saturate(.8)}}@keyframes nx-v5-theme-new{from{opacity:0;filter:saturate(.8)}to{opacity:1;filter:saturate(1)}}

/* Responsive collision prevention for the new chooser and hero annotation. */
@media(max-width:1150px){
  .theme-switcher{gap:4px;padding:4px}.theme-swatch{width:20px;height:20px}
  .hero-browser{left:16px!important;right:5px!important}.brief-note{width:188px!important}.token-note{width:190px!important}.commit-note{left:18px!important;bottom:47px!important}.annotation-arrow{left:1px!important;bottom:-24px!important}.annotation-text{left:88px!important;bottom:-14px!important}
}
@media(max-width:900px){
  .theme-switcher{order:0}.header-actions>.button{order:1}.menu-button{order:2}
  .hero-browser{left:12px!important;right:2px!important}.brief-note{left:2px!important;width:168px!important}.token-note{right:1px!important;width:176px!important}.commit-note{left:10px!important;bottom:48px!important;max-width:170px!important}.annotation-arrow{left:0!important;bottom:-24px!important;width:76px!important}.annotation-text{left:76px!important;bottom:-14px!important;max-width:96px!important;font-size:8px!important}
}
@media(max-width:680px){
  .site-header{gap:10px!important}.header-actions{gap:8px!important}.theme-switcher{gap:3px;padding:3px;border-radius:8px}.theme-swatch{width:18px;height:18px;border-radius:5px}.theme-swatch::before{inset:2px;border-radius:2px}
  .hero::before{display:none!important}.hero-halo{opacity:.42!important;inset:64px 12px 45px 12px!important}.hero-art::before,.hero-art::after{display:none!important}
  .hero-browser{left:5px!important;right:5px!important;top:79px!important}.brief-note{top:13px!important;left:8px!important;width:142px!important}.token-note{width:146px!important;right:6px!important;bottom:5px!important}.commit-note{left:8px!important;bottom:17px!important;max-width:154px!important}.annotation-arrow,.annotation-text{display:none!important}
}
@media(max-width:390px){.brand>span{font-size:21px!important}.brand-symbol{width:20px!important;height:20px!important}.brand{gap:7px!important}.theme-switcher{gap:2px}.theme-swatch{width:16px;height:16px}.header-actions{gap:6px!important}.menu-button{width:32px!important;padding:7px!important}}
@media(prefers-reduced-motion:reduce){
  .hero-copy>.eyebrow,.hero-line,.hero-description,.hero-actions,.hero-footnote,.brief-note,.hero-browser,.sculpture-block,.commit-note,.token-note,.annotation-arrow path,.annotation-text,.commit-check{animation:none!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
}

/* NX CONNECTED AUTH NAV */
.header-login{display:inline-flex;align-items:center;height:36px;padding:0 11px;color:rgba(255,255,255,.72);font-size:12px;font-weight:650;border-radius:7px;transition:color .2s ease,background .2s ease}.header-login:hover{color:#fff;background:rgba(255,255,255,.055)}@media(max-width:900px){.header-login{display:none}}