/* ==========================================================================
   NEUTO™ AI STUDIO — Design System
   Direction: security-document engraving meets cinematic generation console.
   Everything foil-toned is a *verified* state. Never decorate with it.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */

:root {
  /* Surface — passport ink, not pure black. Slight blue keeps foil readable. */
  --n-void:        #05060a;
  --n-base:        #0a0c13;
  --n-slate:       #10131d;
  --n-raised:      #171b28;
  --n-line:        rgba(242, 241, 237, 0.10);
  --n-line-strong: rgba(242, 241, 237, 0.20);

  /* Ink — warm off-white, the colour of passport paper */
  --n-paper:  #f2f1ed;
  --n-mist:   #9aa1b6;
  --n-faint:  #626a80;

  /* Foil — the one bold move. Iridescent security hologram. */
  --n-foil-a: #46f5d4;  /* verify cyan   */
  --n-foil-b: #9b6bff;  /* passport violet */
  --n-foil-c: #ffd166;  /* seal gold     */
  --n-seal:   #ff5a3c;  /* vermillion — revoked / denied only */

  --n-foil: linear-gradient(100deg,
    var(--n-foil-a) 0%,
    #7fd8ff 22%,
    var(--n-foil-b) 48%,
    #ff7bd5 68%,
    var(--n-foil-c) 100%);

  /* Type */
  --n-display: "Bricolage Grotesque", "Archivo", system-ui, sans-serif;
  --n-body:    "Inter Tight", "Inter", system-ui, sans-serif;
  --n-machine: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Scale — fluid, 1.28 ratio at the top end */
  --t-hero: clamp(2.9rem, 7.6vw, 7.4rem);
  --t-h2:   clamp(2rem, 4.4vw, 3.9rem);
  --t-h3:   clamp(1.25rem, 1.9vw, 1.65rem);
  --t-body: clamp(1rem, 1.05vw, 1.1rem);
  --t-mrz:  clamp(0.62rem, 0.78vw, 0.74rem);

  /* Space */
  --s-1: 0.5rem;  --s-2: 0.875rem; --s-3: 1.5rem;
  --s-4: 2.5rem;  --s-5: 4rem;     --s-6: 6.5rem;  --s-7: 10rem;

  --n-radius: 14px;
  --n-radius-lg: 22px;
  --n-shell: min(1240px, 92vw);

  /* Motion — springs are handled in JS; these are the CSS counterparts */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* --- 2. Reset & base ----------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--n-void);
  color: var(--n-paper);
  font-family: var(--n-body);
  font-size: var(--t-body);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--n-foil-b); color: #06070c; }

:focus-visible {
  outline: 2px solid var(--n-foil-a);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- 3. Typographic roles ------------------------------------------------ */

.n-display {
  font-family: var(--n-display);
  font-weight: 700;
  font-variation-settings: "wdth" 96, "opsz" 42;
  letter-spacing: -0.035em;
  line-height: 0.94;
  margin: 0;
}

.n-hero-type { font-size: var(--t-hero); }
.n-h2 { font-size: var(--t-h2); }

.n-h3 {
  font-family: var(--n-display);
  font-weight: 600;
  font-size: var(--t-h3);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}

/* Machine-readable face — used for anything a system would print, never for prose */
.n-machine,
.n-eyebrow,
.n-mrz,
.n-tag {
  font-family: var(--n-machine);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.7rem;
  font-weight: 500;
}

.n-eyebrow {
  color: var(--n-faint);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.n-eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--n-foil);
}

.n-lede {
  color: var(--n-mist);
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
  line-height: 1.55;
  max-width: 56ch;
  margin: 0;
}

.n-foil-text {
  background: var(--n-foil);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: foil-drift 9s linear infinite;
}

@keyframes foil-drift {
  to { background-position: 220% 0; }
}

/* --- 4. Shell & sections ------------------------------------------------- */

.n-shell {
  width: var(--n-shell);
  margin-inline: auto;
}

.n-section { padding-block: var(--s-6); position: relative; }
.n-section--tight { padding-block: var(--s-5); }

.n-section-head {
  display: grid;
  gap: var(--s-2);
  max-width: 62ch;
  margin-bottom: var(--s-4);
}

/* Hairline that reads as a document rule, not a decoration */
.n-rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg,
    transparent, var(--n-line-strong) 12%, var(--n-line-strong) 88%, transparent);
}

/* --- 5. Atmosphere: grain, guilloché, aurora ----------------------------- */

.n-grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

.n-aurora {
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 130vh;
  z-index: -2;
  pointer-events: none;
  filter: blur(90px);
  opacity: 0.5;
}

.n-aurora span {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}

.n-aurora span:nth-child(1) {
  width: 46vw; height: 46vw; left: 4%; top: 8%;
  background: radial-gradient(circle, rgba(70,245,212,0.32), transparent 68%);
}
.n-aurora span:nth-child(2) {
  width: 52vw; height: 52vw; right: 2%; top: 0%;
  background: radial-gradient(circle, rgba(155,107,255,0.34), transparent 68%);
}
.n-aurora span:nth-child(3) {
  width: 34vw; height: 34vw; left: 38%; top: 34%;
  background: radial-gradient(circle, rgba(255,209,102,0.20), transparent 70%);
}

/* Guilloché engraving — the passport's own texture, drawn by JS */
.n-guilloche {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  opacity: 0.16;
  color: var(--n-foil-a);
}

/* --- 6. Header ----------------------------------------------------------- */

.n-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding-block: var(--s-2);
  transition: background 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
  border-bottom: 1px solid transparent;
}

.n-header[data-stuck="true"] {
  background: rgba(5, 6, 10, 0.72);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--n-line);
}

.n-header__inner {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  justify-content: space-between;
}

.n-logo {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  font-family: var(--n-display);
  font-weight: 800;
  font-size: 1.22rem;
  letter-spacing: -0.045em;
}

.n-logo sup {
  font-family: var(--n-body);
  font-size: 0.5em;
  font-weight: 500;
  color: var(--n-mist);
  top: -0.9em;
}

.n-nav {
  display: flex;
  gap: var(--s-3);
  align-items: center;
}

.n-nav a {
  font-size: 0.9rem;
  color: var(--n-mist);
  position: relative;
  padding-block: 0.25rem;
  transition: color 0.25s var(--ease-out);
}

.n-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 1px; width: 100%;
  background: var(--n-foil);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.42s var(--ease-out);
}

.n-nav a:hover { color: var(--n-paper); }
.n-nav a:hover::after { transform: scaleX(1); transform-origin: left; }

@media (max-width: 880px) { .n-nav { display: none; } }

/* Scroll progress — a foil thread across the top of the document */
.n-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 55;
  background: var(--n-foil);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

/* --- 7. Buttons ---------------------------------------------------------- */

.n-btn {
  --btn-bg: var(--n-raised);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.85rem 1.5rem;
  min-height: 46px;
  border-radius: 999px;
  border: 1px solid var(--n-line-strong);
  background: var(--btn-bg);
  color: var(--n-paper);
  font-family: var(--n-body);
  font-size: 0.94rem;
  font-weight: 500;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
  will-change: transform;
}

.n-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--n-foil);
  transform: translateY(101%);
  transition: transform 0.45s var(--ease-out);
}

.n-btn:hover { color: #06070c; border-color: transparent; }
.n-btn:hover::before { transform: translateY(0); }

.n-btn--primary {
  background: var(--n-foil);
  color: #06070c;
  border-color: transparent;
  font-weight: 600;
}
.n-btn--primary::before { background: var(--n-paper); }

.n-btn--ghost { background: transparent; }

/* --- 8. Hero: the generation console ------------------------------------- */

.n-hero {
  position: relative;
  padding-top: clamp(8rem, 15vh, 11rem);
  padding-bottom: var(--s-6);
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: clip;
}

.n-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.82fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  width: 100%;
}

@media (max-width: 1020px) {
  .n-hero__grid { grid-template-columns: 1fr; }
  .n-hero { min-height: auto; }
}

.n-hero__copy { display: grid; gap: var(--s-3); justify-items: start; }

.n-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: var(--s-2);
}

/* Word-level reveal target */
.n-reveal-line { display: block; overflow: hidden; }
.n-reveal-word { display: inline-block; will-change: transform, filter, opacity; }

/* Prompt console — where the page's job actually happens */
.n-console {
  border: 1px solid var(--n-line-strong);
  border-radius: var(--n-radius-lg);
  background: linear-gradient(180deg, rgba(23,27,40,0.92), rgba(10,12,19,0.92));
  backdrop-filter: blur(14px);
  padding: var(--s-2);
  width: 100%;
  max-width: 620px;
  box-shadow: 0 24px 70px -30px rgba(0,0,0,0.9);
}

.n-console__bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.35rem 0.4rem 0.6rem;
  border-bottom: 1px solid var(--n-line);
}

.n-console__field {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 0.4rem 0.4rem;
}

.n-console__input {
  flex: 1;
  min-width: 0;
  font-family: var(--n-body);
  font-size: 1rem;
  color: var(--n-paper);
  background: transparent;
  border: 0;
  padding: 0.4rem 0;
}
.n-console__input::placeholder { color: var(--n-faint); }
.n-console__input:focus { outline: none; }

.n-caret {
  width: 2px;
  height: 1.15em;
  background: var(--n-foil-a);
  animation: blink 1.1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* --- 9. Passport chip — THE SIGNATURE ELEMENT ---------------------------- */

.n-chip-stage {
  perspective: 1400px;
  display: flex;
  justify-content: center;
}

.n-chip {
  position: relative;
  width: min(420px, 84vw);
  aspect-ratio: 1.586 / 1;      /* ID-1, the real passport-card ratio */
  border-radius: 18px;
  padding: 1.15rem 1.25rem;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0.5rem;
  transform-style: preserve-3d;
  will-change: transform;
  border: 1px solid var(--n-line-strong);
  background:
    linear-gradient(155deg, rgba(155,107,255,0.16), transparent 45%),
    linear-gradient(15deg, rgba(70,245,212,0.14), transparent 52%),
    var(--n-slate);
  box-shadow:
    0 40px 90px -40px rgba(0,0,0,0.95),
    inset 0 1px 0 rgba(242,241,237,0.08);
  overflow: hidden;
}

/* The foil sweep tracks the pointer via --mx/--my set in JS */
.n-chip__foil {
  position: absolute;
  inset: -1px;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    360px circle at var(--mx, 50%) var(--my, 0%),
    rgba(255,255,255,0.24),
    rgba(155,107,255,0.16) 28%,
    transparent 62%);
  mix-blend-mode: screen;
  opacity: 0.9;
}

.n-chip__engrave {
  position: absolute;
  inset: 0;
  opacity: 0.22;
  pointer-events: none;
  color: var(--n-foil-a);
}

.n-chip__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  transform: translateZ(28px);
}

.n-chip__body {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  align-items: center;
  transform: translateZ(20px);
}

.n-chip__portrait {
  width: 62px; height: 78px;
  border-radius: 8px;
  border: 1px solid var(--n-line-strong);
  background:
    conic-gradient(from 200deg at 50% 40%, rgba(70,245,212,0.5), rgba(155,107,255,0.5), rgba(255,209,102,0.4), rgba(70,245,212,0.5));
  filter: saturate(0.85) contrast(1.05);
  position: relative;
  overflow: hidden;
}

.n-chip__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(5,6,10,0.5) 0 1px, transparent 1px 3px);
}

.n-chip__fields { display: grid; gap: 0.42rem; min-width: 0; }

.n-field { display: grid; gap: 0.1rem; }
.n-field dt {
  font-family: var(--n-machine);
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--n-faint);
}
.n-field dd {
  margin: 0;
  font-family: var(--n-machine);
  font-size: 0.78rem;
  color: var(--n-paper);
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Machine-readable zone — the strip that makes it read as a real document */
.n-mrz {
  transform: translateZ(14px);
  border-top: 1px solid var(--n-line);
  padding-top: 0.5rem;
  font-size: var(--t-mrz);
  letter-spacing: 0.12em;
  color: var(--n-faint);
  white-space: nowrap;
  overflow: hidden;
  line-height: 1.5;
}

/* Ink stamp — presses in when the custody sequence resolves */
.n-stamp {
  position: absolute;
  right: 4%;
  bottom: 12%;
  width: 118px; height: 118px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 2.5px solid var(--n-foil-a);
  color: var(--n-foil-a);
  font-family: var(--n-machine);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-align: center;
  transform: rotate(-16deg) scale(2.4) translateZ(48px);
  opacity: 0;
  mix-blend-mode: screen;
  pointer-events: none;
}

.n-stamp[data-stamped="true"] {
  animation: stamp-press 0.6s var(--ease-out) forwards;
}

@keyframes stamp-press {
  0%   { opacity: 0; transform: rotate(-16deg) scale(2.4) translateZ(48px); }
  55%  { opacity: 1; transform: rotate(-16deg) scale(0.92) translateZ(48px); }
  100% { opacity: 0.85; transform: rotate(-16deg) scale(1) translateZ(48px); }
}

/* Status pills */
.n-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--n-line-strong);
  color: var(--n-mist);
  font-size: 0.6rem;
  background: rgba(5,6,10,0.5);
}

.n-tag--verified { color: var(--n-foil-a); border-color: rgba(70,245,212,0.4); }
.n-tag--revoked  { color: var(--n-seal);   border-color: rgba(255,90,60,0.4); }

.n-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
  animation: pulse 2.4s var(--ease-out) infinite;
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(70,245,212,0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(70,245,212,0); }
  100% { box-shadow: 0 0 0 0 rgba(70,245,212,0); }
}

/* --- 10. Preset rail (velocity-skewed marquee) --------------------------- */

.n-rail {
  position: relative;
  overflow: hidden;
  padding-block: var(--s-3);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.n-rail__track {
  display: flex;
  gap: var(--s-2);
  width: max-content;
  will-change: transform;
}

.n-preset {
  position: relative;
  width: 268px;
  flex: 0 0 auto;
  border-radius: var(--n-radius);
  border: 1px solid var(--n-line);
  background: var(--n-base);
  overflow: hidden;
  transition: border-color 0.35s var(--ease-out), transform 0.45s var(--ease-out);
}

.n-preset:hover { border-color: var(--n-line-strong); transform: translateY(-6px); }

.n-preset__frame {
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 30% 10%, rgba(155,107,255,0.35), transparent 60%),
    radial-gradient(100% 80% at 80% 90%, rgba(70,245,212,0.28), transparent 62%),
    var(--n-slate);
}

.n-preset__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, rgba(5,6,10,0.32) 0 1px, transparent 1px 4px);
  opacity: 0.5;
}

/* Camera-move glyph animates only on hover — motion previews the motion */
.n-preset__glyph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--n-paper);
  opacity: 0.85;
}

.n-preset:hover .n-preset__glyph > * { animation-play-state: running; }
.n-preset__glyph > * { animation-play-state: paused; }

.n-preset__meta {
  padding: 0.85rem 1rem 1rem;
  display: grid;
  gap: 0.4rem;
}

.n-preset__name {
  font-family: var(--n-display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.015em;
}

.n-preset__note { color: var(--n-faint); font-size: 0.82rem; }

/* --- 11. Chain of custody (pinned sequence) ------------------------------ */

.n-custody { position: relative; }

.n-custody__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

@media (max-width: 1020px) { .n-custody__grid { grid-template-columns: 1fr; } }

.n-custody__sticky {
  position: sticky;
  top: 18vh;
  display: grid;
  gap: var(--s-3);
}

@media (max-width: 1020px) { .n-custody__sticky { position: static; } }

.n-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }

.n-step {
  display: grid;
  grid-template-columns: 4.2rem 1fr;
  gap: var(--s-2);
  padding-block: var(--s-3);
  border-top: 1px solid var(--n-line);
  opacity: 0.35;
  transition: opacity 0.5s var(--ease-out);
}

.n-step:last-child { border-bottom: 1px solid var(--n-line); }
.n-step[data-active="true"] { opacity: 1; }

.n-step__index {
  font-family: var(--n-machine);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--n-faint);
  padding-top: 0.35rem;
}

.n-step[data-active="true"] .n-step__index {
  background: var(--n-foil);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.n-step__body { display: grid; gap: 0.35rem; }
.n-step__body p { margin: 0; color: var(--n-mist); font-size: 0.98rem; }

/* --- 12. Model grid ------------------------------------------------------ */

.n-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-2);
}

.n-card {
  position: relative;
  padding: var(--s-3);
  border-radius: var(--n-radius);
  border: 1px solid var(--n-line);
  background: var(--n-base);
  display: grid;
  gap: 0.7rem;
  align-content: start;
  overflow: hidden;
  transition: border-color 0.35s var(--ease-out), background 0.35s var(--ease-out);
}

.n-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%),
    rgba(155,107,255,0.13), transparent 60%);
  transition: opacity 0.4s var(--ease-out);
}

.n-card:hover { border-color: var(--n-line-strong); }
.n-card:hover::before { opacity: 1; }

.n-card p { margin: 0; color: var(--n-mist); font-size: 0.94rem; }

.n-card__io {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 0.3rem;
}

/* Bento emphasis for the first card, without breaking the auto-fit grid */
@media (min-width: 900px) {
  .n-grid--bento > .n-card:first-child { grid-column: span 2; }
}

/* --- 13. Pricing --------------------------------------------------------- */

.n-plan {
  padding: var(--s-3);
  border-radius: var(--n-radius-lg);
  border: 1px solid var(--n-line);
  background: var(--n-base);
  display: grid;
  gap: var(--s-2);
  align-content: start;
}

.n-plan[data-featured="true"] {
  border-color: transparent;
  background:
    linear-gradient(var(--n-base), var(--n-base)) padding-box,
    var(--n-foil) border-box;
  border: 1px solid transparent;
}

.n-plan__price {
  font-family: var(--n-display);
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}

.n-plan__price small {
  font-family: var(--n-body);
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--n-faint);
  letter-spacing: 0;
}

.n-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }

.n-list li {
  display: grid;
  grid-template-columns: 1rem 1fr;
  gap: 0.6rem;
  font-size: 0.93rem;
  color: var(--n-mist);
}

.n-list li::before {
  content: "";
  width: 7px; height: 7px;
  margin-top: 0.55em;
  border-radius: 2px;
  background: var(--n-foil);
}

/* --- 14. Footer ---------------------------------------------------------- */

.n-footer {
  border-top: 1px solid var(--n-line);
  padding-block: var(--s-5) var(--s-4);
  margin-top: var(--s-6);
}

.n-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s-4);
}

.n-footer h4 {
  font-family: var(--n-machine);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--n-faint);
  margin: 0 0 0.9rem;
  font-weight: 500;
}

.n-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.n-footer a { color: var(--n-mist); font-size: 0.92rem; }
.n-footer a:hover { color: var(--n-paper); }

.n-disclosure {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--n-line);
  color: var(--n-faint);
  font-size: 0.8rem;
  max-width: 78ch;
}

/* --- 15. Cursor ---------------------------------------------------------- */

.n-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--n-line-strong);
  pointer-events: none;
  z-index: 70;
  mix-blend-mode: difference;
  will-change: transform;
  opacity: 0;
  transition: opacity 0.3s, width 0.3s var(--ease-out), height 0.3s var(--ease-out);
}

.n-cursor[data-active="true"] { opacity: 1; }
.n-cursor[data-hot="true"] { width: 54px; height: 54px; background: var(--n-paper); }

@media (hover: none), (pointer: coarse) { .n-cursor { display: none; } }

/* --- 16. Scroll-reveal defaults ------------------------------------------ */

[data-reveal] { opacity: 0; }
.no-js [data-reveal], [data-reveal].is-in { opacity: 1; }

/* --- 17. Reduced motion -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
  .n-cursor, .n-grain { display: none; }
  .n-rail__track { transform: none !important; }
}

/* --- 18. WordPress editor/admin harmony ---------------------------------- */

.editor-styles-wrapper { background: var(--n-void); }
.wp-site-blocks > * { margin-block: 0; }
.n-screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

/* --- 19. Camera-move glyphs ---------------------------------------------
   Each preset card previews its own motion. The glyph is the demo. */

.mv { width: 62%; aspect-ratio: 16/9; border: 1px solid currentColor; border-radius: 3px;
      position: relative; opacity: 0.9; }
.mv::after { content:""; position:absolute; inset:22% 30%; border:1px solid currentColor; opacity:0.55; border-radius:2px; }

.mv--zoom    { animation: mv-zoom 2.4s var(--ease-in-out) infinite; }
.mv--dolly   { animation: mv-dolly 3s var(--ease-in-out) infinite; }
.mv--orbit   { animation: mv-orbit 4s linear infinite; }
.mv--pan     { animation: mv-pan 2.6s var(--ease-in-out) infinite; }
.mv--crane   { animation: mv-crane 3.2s var(--ease-in-out) infinite; }
.mv--vertigo { animation: mv-vertigo 3.4s var(--ease-in-out) infinite; }
.mv--hand    { animation: mv-hand 1.1s linear infinite; }
.mv--bullet  { animation: mv-bullet 3.6s var(--ease-in-out) infinite; }

@keyframes mv-zoom    { 0%,100% { transform: scale(1); } 50% { transform: scale(1.45); } }
@keyframes mv-dolly   { 0%,100% { transform: scale(1.3) translateZ(0); } 50% { transform: scale(0.82); } }
@keyframes mv-orbit   { to { transform: rotateY(360deg); } }
@keyframes mv-pan     { 0%,100% { transform: translateX(-14%) rotateY(-14deg); } 50% { transform: translateX(14%) rotateY(14deg); } }
@keyframes mv-crane   { 0%,100% { transform: translateY(-12%) rotateX(12deg); } 50% { transform: translateY(12%) rotateX(-8deg); } }
@keyframes mv-vertigo { 0%,100% { transform: scale(1) perspective(300px) rotateX(0); } 50% { transform: scale(1.35) perspective(140px) rotateX(10deg); } }
@keyframes mv-hand    { 0% { transform: translate(0,0) rotate(0); } 25% { transform: translate(1.5%,-1%) rotate(0.5deg); }
                        50% { transform: translate(-1%,1.5%) rotate(-0.4deg); } 75% { transform: translate(1%,1%) rotate(0.3deg); }
                        100% { transform: translate(0,0) rotate(0); } }
@keyframes mv-bullet  { 0%,100% { transform: rotateY(0) scale(1); } 45% { transform: rotateY(180deg) scale(1.1); } 55% { transform: rotateY(180deg) scale(1.1); } }

.n-preset__glyph { perspective: 600px; }
.n-preset__glyph .mv { transform-style: preserve-3d; }

/* --- 20. Stat band ------------------------------------------------------- */
.n-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s-3); }
.n-stat { display: grid; gap: 0.3rem; padding-left: var(--s-2); border-left: 1px solid var(--n-line); }
.n-stat__num { font-family: var(--n-display); font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 700;
               letter-spacing: -0.04em; line-height: 1; }
.n-stat__label { color: var(--n-faint); font-size: 0.86rem; }

/* ========================================================================== 
   13. NEUTO AI™ — integrated studio + flagship product system
   ========================================================================== */

.n-logo--brand { gap:.62rem; align-items:center; }
.n-brand-icon { width:28px; height:28px; display:block; flex:0 0 28px; background:url("../brand/neuto-icon-512.png") center/contain no-repeat; filter:invert(1); opacity:.96; }
.n-logo--brand span { display:inline-flex; align-items:flex-start; }
.n-header__actions { display:flex; align-items:center; gap:.75rem; }

.n-menu-toggle {
  display:none; width:44px; height:44px; border:1px solid var(--n-line-strong); border-radius:999px;
  background:rgba(255,255,255,.02); color:var(--n-paper); padding:0; cursor:pointer; position:relative;
}
.n-menu-toggle span { position:absolute; left:12px; right:12px; height:1px; background:currentColor; transition:.3s var(--ease-out); }
.n-menu-toggle span:first-child { top:17px; }
.n-menu-toggle span:last-child { top:25px; }
.n-menu-toggle[aria-expanded="true"] span:first-child { top:21px; transform:rotate(45deg); }
.n-menu-toggle[aria-expanded="true"] span:last-child { top:21px; transform:rotate(-45deg); }
.n-mobile-menu { display:none; }

.n-agency-hero {
  min-height:100svh; position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center;
  padding:clamp(8rem,13vw,11rem) 0 clamp(5rem,8vw,7rem);
}
.n-agency-hero__video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-5; opacity:.44; }
.n-agency-hero__veil { position:absolute; inset:0; z-index:-4; background:linear-gradient(90deg,rgba(5,6,10,.96) 0%,rgba(5,6,10,.78) 48%,rgba(5,6,10,.60) 100%),linear-gradient(180deg,rgba(5,6,10,.35),var(--n-void) 98%); }
.n-agency-hero__grid { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr); gap:clamp(3rem,6vw,7rem); align-items:center; }
.n-agency-hero__copy { display:grid; gap:1.4rem; }
.n-agency-title { font-size:clamp(3rem,6.7vw,6.8rem); max-width:11.5ch; }
.n-agency-lede { max-width:60ch; }

.n-studio-orbit {
  border:1px solid var(--n-line-strong); border-radius:26px; overflow:hidden; min-height:560px; position:relative;
  background:linear-gradient(180deg,rgba(23,27,40,.82),rgba(8,10,16,.92)); box-shadow:0 40px 120px rgba(0,0,0,.35);
  backdrop-filter:blur(16px); transform:perspective(1200px) rotateY(-3deg) rotateX(1deg);
}
.n-studio-orbit::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(120deg,transparent 42%,rgba(255,255,255,.05),transparent 58%); transform:translateX(-120%); animation:n-sheen 8s ease-in-out infinite; }
@keyframes n-sheen { 0%,60%{transform:translateX(-120%)} 82%,100%{transform:translateX(120%)} }
.n-studio-orbit__chrome,.n-studio-orbit__footer { display:flex; justify-content:space-between; align-items:center; padding:1rem 1.15rem; color:var(--n-faint); font-family:var(--n-machine); font-size:.58rem; letter-spacing:.12em; }
.n-studio-orbit__chrome { border-bottom:1px solid var(--n-line); }
.n-studio-orbit__footer { position:absolute; inset:auto 0 0; border-top:1px solid var(--n-line); }
.n-studio-orbit__canvas { position:relative; min-height:455px; overflow:hidden; }
.n-studio-orbit__canvas::before { content:""; position:absolute; inset:0; background-image:linear-gradient(var(--n-line) 1px,transparent 1px),linear-gradient(90deg,var(--n-line) 1px,transparent 1px); background-size:42px 42px; opacity:.28; mask-image:radial-gradient(circle at center,#000,transparent 78%); }
.n-studio-orbit__core { position:absolute; left:50%; top:50%; width:160px; height:160px; transform:translate(-50%,-50%); border:1px solid var(--n-line-strong); border-radius:50%; display:grid; place-content:center; text-align:center; gap:.35rem; background:rgba(5,6,10,.78); box-shadow:0 0 0 28px rgba(155,107,255,.035),0 0 90px rgba(70,245,212,.1); }
.n-studio-orbit__core b { font-family:var(--n-display); letter-spacing:-.03em; font-size:1.8rem; }
.n-studio-orbit__core small { font-family:var(--n-machine); color:var(--n-faint); font-size:.48rem; letter-spacing:.13em; }
.n-studio-pulse { width:9px; height:9px; border-radius:50%; background:var(--n-foil-a); position:absolute; top:20px; left:50%; transform:translateX(-50%); box-shadow:0 0 0 0 rgba(70,245,212,.35); animation:n-pulse 2.4s infinite; }
@keyframes n-pulse { 60%{box-shadow:0 0 0 18px rgba(70,245,212,0)} 100%{box-shadow:0 0 0 18px rgba(70,245,212,0)} }
.n-studio-node { position:absolute; width:150px; padding:.85rem .95rem; border:1px solid var(--n-line-strong); border-radius:12px; background:rgba(10,12,19,.88); backdrop-filter:blur(10px); display:grid; gap:.1rem; animation:n-float 7s ease-in-out infinite; }
.n-studio-node span { font-family:var(--n-machine); color:var(--n-faint); font-size:.54rem; letter-spacing:.12em; }
.n-studio-node strong { font-family:var(--n-display); font-size:1rem; }
.n-studio-node small { color:var(--n-mist); font-size:.72rem; }
.n-studio-node--one { top:16%; left:7%; }
.n-studio-node--two { top:12%; right:8%; animation-delay:-1.2s; }
.n-studio-node--three { bottom:17%; left:8%; animation-delay:-2.3s; }
.n-studio-node--four { bottom:15%; right:7%; animation-delay:-3.4s; }
@keyframes n-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }

.n-proof { border-top:1px solid var(--n-line); border-bottom:1px solid var(--n-line); background:rgba(255,255,255,.012); }
.n-proof__grid { display:grid; grid-template-columns:repeat(4,1fr); }
.n-proof__item { min-height:120px; padding:1.4rem 1.5rem; border-right:1px solid var(--n-line); display:flex; flex-direction:column; justify-content:center; gap:.3rem; }
.n-proof__item:last-child { border-right:0; }
.n-proof__item strong { font-family:var(--n-display); font-size:clamp(1.35rem,2.1vw,2rem); letter-spacing:-.03em; }
.n-proof__item span { color:var(--n-faint); font-family:var(--n-machine); text-transform:uppercase; letter-spacing:.08em; font-size:.58rem; }

.n-agency-service-grid { width:var(--n-shell); margin-inline:auto; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--n-line-strong); border-left:1px solid var(--n-line-strong); }
.n-agency-service { min-height:330px; border-right:1px solid var(--n-line-strong); border-bottom:1px solid var(--n-line-strong); padding:clamp(1.5rem,2.2vw,2.2rem); position:relative; overflow:hidden; display:flex; flex-direction:column; }
.n-agency-service::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(155,107,255,.12),transparent 38%); opacity:0; transition:opacity .35s ease; pointer-events:none; }
.n-agency-service:hover::before { opacity:1; }
.n-agency-service__index { font-family:var(--n-machine); color:var(--n-faint); font-size:.6rem; letter-spacing:.12em; }
.n-agency-service h3 { margin:auto 0 .85rem; font-family:var(--n-display); font-size:clamp(1.5rem,2vw,2rem); letter-spacing:-.03em; }
.n-agency-service p { color:var(--n-mist); margin:0 0 1.4rem; }
.n-agency-service__tags { display:flex; flex-wrap:wrap; gap:.4rem; }

.n-product-feature { background:linear-gradient(180deg,rgba(155,107,255,.035),transparent 70%); overflow:hidden; }
.n-product-feature__grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(420px,.86fr); gap:clamp(3rem,7vw,8rem); align-items:center; }
.n-product-feature__copy { display:grid; gap:1.2rem; }
.n-product-feature__copy sup { font-size:.27em; vertical-align:top; margin-left:.08em; }
.n-product-feature__points { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; margin:.4rem 0 .8rem; }
.n-product-feature__points span { border-top:1px solid var(--n-line); padding:.8rem 0; color:var(--n-mist); font-size:.9rem; }

.n-agency-work-grid { width:var(--n-shell); margin-inline:auto; display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--n-line-strong); border:1px solid var(--n-line-strong); }
.n-agency-work { background:var(--n-base); min-height:410px; padding:clamp(1.5rem,2.6vw,2.7rem); position:relative; overflow:hidden; display:flex; flex-direction:column; }
.n-agency-work::after { content:""; position:absolute; inset:0; background:linear-gradient(145deg,transparent 45%,rgba(70,245,212,.05),rgba(155,107,255,.07)); transform:translateY(20%); transition:.5s var(--ease-out); }
.n-agency-work:hover::after { transform:translateY(0); }
.n-agency-work__meta { display:flex; justify-content:space-between; font-family:var(--n-machine); font-size:.57rem; letter-spacing:.1em; color:var(--n-faint); text-transform:uppercase; }
.n-agency-work h3 { margin:auto 0 .8rem; font-family:var(--n-display); font-size:clamp(1.8rem,3vw,3rem); line-height:1; letter-spacing:-.04em; position:relative; z-index:1; }
.n-agency-work p { color:var(--n-mist); max-width:52ch; margin:0; position:relative; z-index:1; }

.n-process { border-top:1px solid var(--n-line); }
.n-process__grid { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--n-line-strong); }
.n-process__grid li { min-height:290px; padding:1.5rem; border-right:1px solid var(--n-line); display:flex; flex-direction:column; }
.n-process__grid li:last-child { border-right:0; }
.n-process__grid span { font-family:var(--n-machine); color:var(--n-faint); font-size:.58rem; }
.n-process__grid h3 { margin:auto 0 .7rem; font-family:var(--n-display); font-size:1.5rem; letter-spacing:-.025em; }
.n-process__grid p { margin:0; color:var(--n-mist); font-size:.94rem; }
.n-agency-cta { overflow:hidden; border-top:1px solid var(--n-line); }

.n-subhero { position:relative; min-height:70svh; display:flex; align-items:center; padding:clamp(8rem,12vw,11rem) 0 clamp(5rem,8vw,7rem); overflow:hidden; }
.n-subhero .n-shell { display:grid; gap:1.35rem; }
.n-subhero__grid { grid-template-columns:minmax(0,1fr) minmax(420px,.9fr)!important; align-items:center; gap:clamp(3rem,7vw,7rem)!important; }
.n-product-hero { min-height:90svh; }

.n-platform-console { border:1px solid var(--n-line-strong); border-radius:22px; overflow:hidden; background:linear-gradient(180deg,var(--n-raised),var(--n-base)); box-shadow:0 35px 100px rgba(0,0,0,.3); }
.n-platform-console__top { display:flex; justify-content:space-between; padding:1rem 1.1rem; border-bottom:1px solid var(--n-line); font-family:var(--n-machine); font-size:.56rem; color:var(--n-faint); letter-spacing:.11em; }
.n-platform-console__body { min-height:420px; display:grid; grid-template-columns:120px 1fr; }
.n-platform-console__body aside { border-right:1px solid var(--n-line); padding:1rem; display:grid; align-content:start; gap:.45rem; }
.n-platform-console__body aside span,.n-platform-console__body aside b { padding:.7rem .55rem; font-size:.72rem; border-radius:8px; }
.n-platform-console__body aside b { background:rgba(255,255,255,.06); }
.n-platform-console__body aside span { color:var(--n-faint); }
.n-platform-console__main { padding:1.3rem; display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.n-platform-console__metric { padding:1.1rem; border:1px solid var(--n-line); border-radius:12px; display:grid; gap:.25rem; }
.n-platform-console__metric span,.n-platform-console__metric small { color:var(--n-faint); font-size:.68rem; }
.n-platform-console__metric strong { font-family:var(--n-display); font-size:2rem; }
.n-platform-console__timeline,.n-platform-console__rows { grid-column:1/-1; border:1px solid var(--n-line); border-radius:12px; }
.n-platform-console__timeline { min-height:130px; padding:1rem; display:flex; align-items:flex-end; gap:.55rem; }
.n-platform-console__timeline i { flex:1; height:45%; border-radius:4px 4px 0 0; background:var(--n-foil); opacity:.45; }
.n-platform-console__timeline i:nth-child(2){height:68%}.n-platform-console__timeline i:nth-child(3){height:58%}.n-platform-console__timeline i:nth-child(4){height:82%}.n-platform-console__timeline i:nth-child(5){height:70%}.n-platform-console__timeline i:nth-child(6){height:92%}
.n-platform-console__rows { padding:.8rem 1rem; display:grid; gap:.55rem; font-family:var(--n-machine); font-size:.52rem; letter-spacing:.08em; color:var(--n-mist); }
.n-platform-pillars { display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid var(--n-line-strong); }
.n-platform-pillars article { padding:1.4rem; border-right:1px solid var(--n-line); min-height:270px; display:flex; flex-direction:column; }
.n-platform-pillars article:last-child { border-right:0; }
.n-platform-pillars span { color:var(--n-faint); font-family:var(--n-machine); font-size:.57rem; }
.n-platform-pillars h3 { margin:auto 0 .6rem; font-family:var(--n-display); font-size:1.35rem; }
.n-platform-pillars p { margin:0; color:var(--n-mist); font-size:.88rem; }

.n-about-manifest { border:1px solid var(--n-line-strong); border-radius:20px; min-height:360px; padding:1.5rem; display:grid; align-content:center; justify-items:start; background:linear-gradient(145deg,rgba(155,107,255,.07),rgba(70,245,212,.025)); }
.n-about-manifest > span,.n-about-manifest small { font-family:var(--n-machine); letter-spacing:.12em; color:var(--n-faint); font-size:.58rem; }
.n-about-manifest strong { font-family:var(--n-display); font-size:clamp(3.2rem,6vw,6rem); line-height:.9; margin-top:1.5rem; }
.n-about-principles { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--n-line-strong); }
.n-about-principles article { min-height:300px; padding:1.5rem; border-right:1px solid var(--n-line); display:flex; flex-direction:column; }
.n-about-principles article:last-child { border-right:0; }
.n-about-principles span { font-family:var(--n-machine); color:var(--n-faint); font-size:.58rem; }
.n-about-principles h3 { margin:auto 0 .7rem; font-family:var(--n-display); font-size:1.6rem; }
.n-about-principles p { color:var(--n-mist); margin:0; }

.n-contact-grid { grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr)!important; gap:clamp(3rem,8vw,8rem)!important; align-items:start; }
.n-contact-panel { border:1px solid var(--n-line-strong); border-radius:22px; padding:clamp(1.4rem,2.5vw,2.5rem); background:linear-gradient(180deg,rgba(23,27,40,.86),rgba(10,12,19,.92)); }
.n-contact-form { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.n-contact-form label { display:grid; gap:.4rem; color:var(--n-mist); font-size:.82rem; }
.n-contact-form label.n-contact-form__wide { grid-column:1/-1; }
.n-contact-form input,.n-contact-form textarea,.n-contact-form select { width:100%; background:rgba(5,6,10,.64); color:var(--n-paper); border:1px solid var(--n-line-strong); border-radius:10px; padding:.9rem 1rem; font:inherit; }
.n-contact-form textarea { min-height:150px; resize:vertical; }
.n-contact-form__hp { position:absolute!important; left:-9999px!important; }
.n-contact-notice { grid-column:1/-1; padding:.8rem 1rem; border:1px solid var(--n-line); border-radius:10px; color:var(--n-mist); }

.n-footer__grid--studio { grid-template-columns:1.6fr 1fr 1fr 1fr; }
.n-footer__statement { color:var(--n-mist); max-width:38ch; margin:.9rem 0 0; font-size:.94rem; }
.n-footer__bottom { border-top:1px solid var(--n-line); margin-top:2.4rem; padding-top:1rem; display:flex; justify-content:space-between; gap:1rem; font-family:var(--n-machine); color:var(--n-faint); font-size:.55rem; letter-spacing:.1em; }

@media (max-width: 1080px) {
  .n-agency-hero__grid,.n-product-feature__grid,.n-subhero__grid,.n-contact-grid { grid-template-columns:1fr!important; }
  .n-studio-orbit { max-width:760px; width:100%; transform:none; }
  .n-agency-service-grid { grid-template-columns:repeat(2,1fr); }
  .n-proof__grid { grid-template-columns:repeat(2,1fr); }
  .n-proof__item:nth-child(2) { border-right:0; }
  .n-proof__item:nth-child(-n+2) { border-bottom:1px solid var(--n-line); }
  .n-process__grid,.n-platform-pillars { grid-template-columns:repeat(2,1fr); }
  .n-process__grid li:nth-child(2n),.n-platform-pillars article:nth-child(2n) { border-right:0; }
  .n-process__grid li,.n-platform-pillars article { border-bottom:1px solid var(--n-line); }
  .n-about-principles { grid-template-columns:1fr; }
  .n-about-principles article { border-right:0; border-bottom:1px solid var(--n-line); }
  .n-footer__grid--studio { grid-template-columns:1.5fr 1fr 1fr; }
  .n-footer__grid--studio > div:last-child { grid-column:2; }
}

@media (max-width: 880px) {
  .n-header__cta { display:none; }
  .n-menu-toggle { display:block; }
  .n-mobile-menu { display:block; position:absolute; left:4vw; right:4vw; top:calc(100% + .35rem); border:1px solid var(--n-line-strong); border-radius:18px; background:rgba(5,6,10,.96); backdrop-filter:blur(20px); transform:translateY(-8px); opacity:0; pointer-events:none; transition:.28s var(--ease-out); }
  .n-mobile-menu[data-open="true"] { transform:translateY(0); opacity:1; pointer-events:auto; }
  .n-mobile-menu nav { display:grid; padding:.55rem; }
  .n-mobile-menu a { padding:.85rem 1rem; border-bottom:1px solid var(--n-line); font-family:var(--n-display); font-size:1.1rem; }
  .n-mobile-menu a:last-child { border-bottom:0; }
  .n-agency-hero { min-height:auto; }
  .n-agency-hero__grid { gap:3rem; }
  .n-agency-title { font-size:clamp(2.9rem,12vw,5rem); }
  .n-studio-orbit { min-height:470px; }
  .n-studio-orbit__canvas { min-height:385px; }
  .n-agency-work-grid { grid-template-columns:1fr; }
  .n-agency-work { min-height:330px; }
  .n-footer__grid--studio { grid-template-columns:1fr 1fr; }
  .n-footer__grid--studio > div:first-child { grid-column:1/-1; }
  .n-footer__grid--studio > div:last-child { grid-column:auto; }
}

@media (max-width: 640px) {
  .n-agency-service-grid,.n-proof__grid,.n-process__grid,.n-platform-pillars { grid-template-columns:1fr; }
  .n-agency-service { min-height:285px; }
  .n-proof__item { border-right:0!important; border-bottom:1px solid var(--n-line); }
  .n-proof__item:last-child { border-bottom:0; }
  .n-process__grid li,.n-platform-pillars article { border-right:0!important; }
  .n-product-feature__points { grid-template-columns:1fr; }
  .n-studio-orbit { min-height:430px; }
  .n-studio-orbit__canvas { min-height:345px; }
  .n-studio-node { width:126px; padding:.7rem; }
  .n-studio-node--one { top:9%; left:4%; }.n-studio-node--two { top:8%; right:4%; }.n-studio-node--three { bottom:11%; left:4%; }.n-studio-node--four { bottom:10%; right:4%; }
  .n-studio-orbit__core { width:130px; height:130px; }
  .n-platform-console__body { grid-template-columns:78px 1fr; }
  .n-platform-console__body aside { padding:.55rem; }
  .n-platform-console__body aside b,.n-platform-console__body aside span { padding:.55rem .35rem; font-size:.58rem; }
  .n-platform-console__main { padding:.75rem; gap:.6rem; }
  .n-platform-console__metric { padding:.75rem; }
  .n-contact-form { grid-template-columns:1fr; }
  .n-contact-form label.n-contact-form__wide { grid-column:auto; }
  .n-footer__grid--studio { grid-template-columns:1fr; }
  .n-footer__bottom { flex-direction:column; }
}

@media (prefers-reduced-motion: reduce) {
  .n-studio-node,.n-studio-orbit::after,.n-studio-pulse { animation:none!important; }
  .n-agency-hero__video { display:none; }
}

/* ==========================================================================
   Work / interactive portfolio — v2.2
   ========================================================================== */
.n-work-hero { position:relative; min-height:min(820px,88vh); display:flex; align-items:center; overflow:hidden; padding:clamp(7.5rem,13vw,12rem) 0 clamp(4rem,8vw,7rem); border-bottom:1px solid var(--n-line-strong); background:radial-gradient(circle at 72% 25%,rgba(155,107,255,.12),transparent 30%),radial-gradient(circle at 25% 85%,rgba(70,245,212,.07),transparent 30%),var(--n-void); }
.n-work-hero::before { content:""; position:absolute; inset:0; opacity:.28; pointer-events:none; background-image:linear-gradient(var(--n-line) 1px,transparent 1px),linear-gradient(90deg,var(--n-line) 1px,transparent 1px); background-size:72px 72px; -webkit-mask-image:linear-gradient(90deg,#000,transparent 78%); mask-image:linear-gradient(90deg,#000,transparent 78%); }
.n-work-hero__grid { position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.06fr) minmax(360px,.74fr); gap:clamp(2.5rem,7vw,8rem); align-items:center; }
.n-work-hero__copy { min-width:0; }
.n-work-title { font-size:clamp(3.2rem,7.3vw,7.1rem); max-width:10.2ch; margin:.8rem 0 1.6rem; }
.n-work-hero__lede { max-width:52ch; margin:0; }
.n-work-hero__actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem; }
.n-work-index { position:relative; min-width:0; border:1px solid var(--n-line-strong); background:rgba(10,12,19,.72); backdrop-filter:blur(18px); overflow:hidden; }
.n-work-index__top,.n-work-index__foot { display:flex; justify-content:space-between; gap:1rem; align-items:center; min-height:44px; padding:.75rem 1rem; color:var(--n-faint); border-bottom:1px solid var(--n-line); font:500 .58rem/1 var(--n-machine); letter-spacing:.12em; text-transform:uppercase; }
.n-work-index__foot { border-top:1px solid var(--n-line); border-bottom:0; }
.n-work-index__matrix { height:clamp(90px,10vw,130px); position:relative; display:grid; grid-template-columns:repeat(10,1fr); gap:1px; align-items:end; padding:1rem; overflow:hidden; border-bottom:1px solid var(--n-line); background:linear-gradient(180deg,rgba(255,255,255,.02),transparent); }
.n-work-index__matrix::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(70,245,212,.08),transparent); transform:translateX(-100%); animation:n-work-scan 5.5s linear infinite; }
.n-work-index__matrix span { position:relative; display:block; min-height:18px; height:calc(18% + (var(--i) * 6%)); border:1px solid var(--n-line-strong); background:linear-gradient(180deg,rgba(242,241,237,.16),rgba(242,241,237,.02)); transform-origin:bottom; animation:n-work-bar 4.6s ease-in-out infinite alternate; animation-delay:calc(var(--i) * -170ms); }
.n-work-index__rows div { display:grid; grid-template-columns:44px 1fr 34px; align-items:center; min-height:58px; padding:.55rem 1rem; border-bottom:1px solid var(--n-line); }
.n-work-index__rows div:last-child { border-bottom:0; }
.n-work-index__rows span,.n-work-index__rows em { color:var(--n-faint); font:500 .58rem/1 var(--n-machine); letter-spacing:.1em; font-style:normal; }
.n-work-index__rows strong { font-size:.85rem; font-weight:500; letter-spacing:-.01em; }
.n-work-index__rows em { text-align:right; color:var(--n-paper); }
@keyframes n-work-scan { to { transform:translateX(100%); } }
@keyframes n-work-bar { 0% { transform:scaleY(.55); opacity:.48; } 100% { transform:scaleY(1); opacity:1; } }

.n-portfolio-section { padding-top:0; overflow:clip; }
.n-portfolio-intro { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(280px,.65fr); gap:clamp(2rem,6vw,7rem); align-items:end; padding:clamp(4rem,7vw,7rem) 0 clamp(2.2rem,4vw,4rem); }
.n-portfolio-intro .n-h2 { max-width:12ch; margin:.65rem 0 0; }
.n-portfolio-intro .n-lede { margin:0; max-width:47ch; justify-self:end; }

.n-portfolio-explorer { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,.65fr); min-height:clamp(480px,48vw,650px); border:1px solid var(--n-line-strong); background:var(--n-base); margin-bottom:clamp(3rem,6vw,6rem); }
.n-portfolio-explorer__visual { position:relative; min-height:440px; overflow:hidden; background:var(--n-slate); border-right:1px solid var(--n-line-strong); }
.n-explorer-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; opacity:0; transform:scale(1.035); filter:saturate(.82) contrast(1.02); transition:opacity .55s ease,transform 1s var(--ease-out),filter .6s ease; }
.n-explorer-image.is-active { opacity:1; transform:scale(1); filter:saturate(1) contrast(1); }
.n-portfolio-explorer__overlay { position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(5,6,10,.02) 45%,rgba(5,6,10,.88) 100%),linear-gradient(90deg,rgba(5,6,10,.24),transparent 38%); }
.n-portfolio-explorer__caption { position:absolute; z-index:2; left:clamp(1.2rem,3vw,2.5rem); right:clamp(1.2rem,3vw,2.5rem); bottom:clamp(1.2rem,3vw,2.4rem); display:grid; grid-template-columns:auto 1fr auto; gap:.5rem 1.2rem; align-items:end; color:#fff; }
.n-portfolio-explorer__caption p { grid-column:1/-1; margin:0 0 .35rem; font:500 .58rem/1 var(--n-machine); letter-spacing:.12em; color:rgba(255,255,255,.62); }
.n-portfolio-explorer__caption h3 { margin:0; font:650 clamp(2rem,4.2vw,4.8rem)/.94 var(--n-display); letter-spacing:-.055em; }
.n-portfolio-explorer__caption > span { align-self:center; font:500 .58rem/1.25 var(--n-machine); letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.68); }
.n-portfolio-explorer__link { justify-self:end; align-self:center; display:inline-flex; align-items:center; gap:.65rem; min-height:42px; padding:.65rem .85rem; border:1px solid rgba(255,255,255,.36); background:rgba(4,6,10,.45); backdrop-filter:blur(10px); font:500 .58rem/1 var(--n-machine); letter-spacing:.1em; text-transform:uppercase; transition:background .25s ease,color .25s ease,border-color .25s ease; }
.n-portfolio-explorer__link:hover { background:#fff; color:#08090d; border-color:#fff; }
.n-portfolio-explorer__list { display:flex; flex-direction:column; min-width:0; }
.n-explorer-row { flex:1; min-height:58px; width:100%; display:grid; grid-template-columns:34px minmax(0,1fr) auto 20px; gap:.75rem; align-items:center; padding:.7rem 1rem; border:0; border-bottom:1px solid var(--n-line); background:transparent; color:var(--n-paper); text-align:left; cursor:pointer; transition:background .25s ease,color .25s ease,padding .3s var(--ease-out); }
.n-explorer-row:last-child { border-bottom:0; }
.n-explorer-row:hover,.n-explorer-row.is-active { background:var(--n-paper); color:var(--n-base); padding-left:1.2rem; }
.n-explorer-row span,.n-explorer-row em { font:500 .55rem/1.15 var(--n-machine); letter-spacing:.08em; text-transform:uppercase; color:var(--n-faint); font-style:normal; }
.n-explorer-row strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.78rem; font-weight:550; }
.n-explorer-row em { max-width:115px; text-align:right; }
.n-explorer-row i { font-style:normal; opacity:.55; }
.n-explorer-row.is-active span,.n-explorer-row.is-active em,.n-explorer-row:hover span,.n-explorer-row:hover em { color:rgba(10,12,19,.58); }

.n-portfolio-toolbar { display:flex; align-items:center; gap:.55rem; min-height:66px; padding:.65rem 0; border-top:1px solid var(--n-line-strong); border-bottom:1px solid var(--n-line-strong); overflow-x:auto; scrollbar-width:none; position:relative; }
.n-portfolio-toolbar::-webkit-scrollbar { display:none; }
.n-portfolio-filter { appearance:none; border:1px solid var(--n-line-strong); background:transparent; color:var(--n-mist); border-radius:999px; padding:.63rem .9rem; white-space:nowrap; font-family:var(--n-machine); font-size:.61rem; line-height:1; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s var(--ease-out); }
.n-portfolio-filter:hover { color:var(--n-paper); border-color:rgba(255,255,255,.34); transform:translateY(-1px); }
.n-portfolio-filter.is-active { background:var(--n-paper); border-color:var(--n-paper); color:var(--n-base); }
.n-portfolio-count { margin-left:auto; padding-left:1rem; color:var(--n-faint); font-family:var(--n-machine); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.n-portfolio-count b { color:var(--n-paper); font-weight:500; }
.n-portfolio-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.2rem,2.2vw,2.4rem); padding:clamp(2.5rem,5vw,5rem) 0 0; }
.n-portfolio-card { min-width:0; opacity:1; transform:translateY(0) scale(1); transition:opacity .32s ease,transform .45s var(--ease-out),filter .32s ease; perspective:1200px; }
.n-portfolio-card:nth-child(4n+2),.n-portfolio-card:nth-child(4n+3) { margin-top:clamp(0rem,3vw,2rem); }
.n-portfolio-card.is-filtering-out { opacity:0; transform:translateY(14px) scale(.985); filter:blur(4px); pointer-events:none; }
.n-portfolio-card[hidden] { display:none !important; }
.n-portfolio-card__link { display:block; color:inherit; text-decoration:none; }
.n-browser-frame { --mx:50%; --my:50%; position:relative; border:1px solid var(--n-line-strong); overflow:hidden; background:var(--n-panel,var(--n-slate)); box-shadow:0 20px 65px rgba(0,0,0,.12); transform-style:preserve-3d; transition:transform .45s var(--ease-out),border-color .35s ease,box-shadow .55s var(--ease-out); }
.n-portfolio-card:hover .n-browser-frame { border-color:rgba(255,255,255,.35); box-shadow:0 32px 90px rgba(0,0,0,.24); }
.n-browser-frame__bar { min-height:42px; display:grid; grid-template-columns:72px 1fr 72px; align-items:center; padding:0 .9rem; border-bottom:1px solid var(--n-line-strong); background:var(--n-base); color:var(--n-faint); }
.n-browser-dots { display:flex; gap:5px; }
.n-browser-dots i { width:6px; height:6px; border-radius:50%; border:1px solid currentColor; opacity:.65; }
.n-browser-domain { text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--n-machine); font-size:.58rem; letter-spacing:.06em; }
.n-browser-open { justify-self:end; font-family:var(--n-machine); font-size:.8rem; }
.n-portfolio-shot { aspect-ratio:16/9; position:relative; overflow:hidden; background:var(--n-slate); }
.n-portfolio-shot img { width:100%; height:100%; object-fit:cover; object-position:top center; position:relative; z-index:1; transition:transform .9s var(--ease-out),filter .45s ease; }
.n-portfolio-card:hover .n-portfolio-shot img { transform:scale(1.035); }
.n-portfolio-shot__glint { position:absolute; z-index:2; inset:0; pointer-events:none; opacity:0; background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.15),transparent 28%); transition:opacity .3s ease; }
.n-portfolio-card:hover .n-portfolio-shot__glint { opacity:1; }
.n-portfolio-shot__veil { position:absolute; inset:auto 0 0; z-index:3; display:flex; justify-content:space-between; align-items:center; padding:1rem 1.15rem; background:linear-gradient(180deg,transparent,rgba(3,5,8,.86)); color:#fff; font-family:var(--n-machine); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; transform:translateY(100%); transition:transform .4s var(--ease-out); }
.n-portfolio-card:hover .n-portfolio-shot__veil { transform:translateY(0); }
.n-portfolio-card__body { padding:1.05rem .1rem 1.4rem; }
.n-portfolio-card__meta { display:flex; justify-content:space-between; gap:1rem; margin-bottom:.7rem; color:var(--n-faint); font-family:var(--n-machine); font-size:.58rem; letter-spacing:.09em; text-transform:uppercase; }
.n-portfolio-card__body h3 { margin:0; font-family:var(--n-display); font-size:clamp(1.45rem,2.45vw,2.35rem); line-height:1.05; letter-spacing:-.045em; }
.n-portfolio-card__body p { margin:.35rem 0 0; color:var(--n-faint); font-family:var(--n-machine); font-size:.64rem; letter-spacing:.04em; }

@media (max-width:1050px) {
  .n-work-hero__grid { grid-template-columns:1fr; }
  .n-work-index { max-width:720px; }
  .n-portfolio-explorer { grid-template-columns:1fr; }
  .n-portfolio-explorer__visual { min-height:min(62vw,560px); border-right:0; border-bottom:1px solid var(--n-line-strong); }
  .n-portfolio-explorer__list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .n-explorer-row:nth-child(odd) { border-right:1px solid var(--n-line); }
}
@media (max-width:900px) {
  .n-work-hero { min-height:auto; }
  .n-portfolio-intro { grid-template-columns:1fr; gap:1.2rem; }
  .n-portfolio-intro .n-lede { justify-self:start; }
  .n-portfolio-grid { grid-template-columns:1fr; }
  .n-portfolio-card:nth-child(n) { margin-top:0; }
  .n-portfolio-count { display:none; }
}
@media (max-width:650px) {
  .n-work-hero__grid { gap:2rem; }
  .n-work-title { font-size:clamp(3rem,15vw,4.7rem); }
  .n-work-index__matrix { height:84px; }
  .n-work-index__rows div { min-height:52px; }
  .n-portfolio-explorer__visual { min-height:68vw; }
  .n-portfolio-explorer__caption { grid-template-columns:1fr auto; }
  .n-portfolio-explorer__caption h3 { grid-column:1/-1; font-size:clamp(2rem,10vw,3.2rem); }
  .n-portfolio-explorer__caption > span { display:none; }
  .n-portfolio-explorer__link { justify-self:start; }
  .n-portfolio-explorer__list { grid-template-columns:1fr; }
  .n-explorer-row:nth-child(odd) { border-right:0; }
  .n-explorer-row em { display:none; }
  .n-portfolio-toolbar { margin-inline:calc(var(--n-gutter,4vw) * -1); padding-inline:var(--n-gutter,4vw); }
  .n-browser-frame__bar { grid-template-columns:52px 1fr 52px; min-height:38px; padding-inline:.7rem; }
  .n-portfolio-card__meta { font-size:.54rem; }
  .n-portfolio-shot__veil { display:none; }
}
@media (hover:none), (pointer:coarse) {
  .n-explorer-row:hover { background:transparent; color:var(--n-paper); padding-left:1rem; }
  .n-explorer-row:hover span,.n-explorer-row:hover em { color:var(--n-faint); }
  .n-explorer-row.is-active { background:var(--n-paper); color:var(--n-base); padding-left:1.2rem; }
  .n-explorer-row.is-active span,.n-explorer-row.is-active em { color:rgba(10,12,19,.58); }
}
@media (prefers-reduced-motion:reduce) {
  .n-work-index__matrix::before,.n-work-index__matrix span { animation:none!important; }
  .n-portfolio-card,.n-browser-frame,.n-portfolio-shot img,.n-portfolio-shot__veil,.n-explorer-image,.n-explorer-row { transition:none!important; }
}


/* ==========================================================================
   Projects / full-preview presentation — v2.3
   ========================================================================== */
.n-portfolio-explorer__visual {
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  min-height:0;
  overflow:hidden;
  background:#080a0f;
}
.n-portfolio-explorer__stage {
  position:relative;
  min-height:clamp(390px,38vw,560px);
  overflow:hidden;
  background:
    linear-gradient(135deg,rgba(255,255,255,.022),transparent 34%),
    #080a0f;
}
.n-explorer-image {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center center;
  opacity:0;
  transform:none;
  filter:none;
  transition:opacity .45s ease;
}
.n-explorer-image.is-active {
  opacity:1;
  transform:none;
  filter:none;
}
.n-portfolio-explorer__overlay {
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.018),transparent 18%,transparent 82%,rgba(0,0,0,.06));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
}
.n-portfolio-explorer__caption {
  position:relative;
  left:auto;
  right:auto;
  bottom:auto;
  z-index:2;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:.55rem 1.2rem;
  align-items:end;
  min-height:122px;
  padding:1.15rem clamp(1.15rem,2.4vw,2rem) 1.3rem;
  color:#fff;
  background:#080a0f;
  border-top:1px solid var(--n-line-strong);
}
.n-portfolio-explorer__caption p { margin:0; }
.n-portfolio-explorer__caption h3 {
  font-size:clamp(1.9rem,3vw,3.4rem);
  white-space:normal;
  overflow-wrap:anywhere;
}
.n-portfolio-explorer__link { background:rgba(255,255,255,.02); }

.n-portfolio-shot {
  aspect-ratio:16/9;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#080a0f;
}
.n-portfolio-shot img {
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center center;
  transform:none!important;
  filter:none;
}
.n-portfolio-card:hover .n-portfolio-shot img { transform:none!important; }
.n-portfolio-shot__veil { background:linear-gradient(180deg,transparent,rgba(3,5,8,.72)); }

@media (max-width:1050px) {
  .n-portfolio-explorer__visual { min-height:0; }
  .n-portfolio-explorer__stage { min-height:clamp(360px,56vw,560px); }
}
@media (max-width:650px) {
  .n-portfolio-explorer__stage { min-height:0; aspect-ratio:16/10; }
  .n-portfolio-explorer__caption {
    grid-template-columns:1fr auto;
    min-height:0;
    padding:1rem;
  }
  .n-portfolio-explorer__caption h3 { grid-column:1/-1; font-size:clamp(1.9rem,9vw,2.8rem); }
  .n-portfolio-explorer__caption > span { display:none; }
  .n-portfolio-explorer__link { justify-self:start; }
}