/* ============================================================
   LEBao LB-01 · JIZHI SPACE 极智空间
   Global design system — holographic deep-space aesthetic
   ============================================================ */

/* ---------- A. TOKENS & RESET ---------- */
:root {
  --bg: #04070f;
  --bg2: #070c1a;
  --ink: #d9e9ff;
  --mut: #71859f;
  --dim: #465a76;
  --cy: #5cf2ff;
  --mg: #ff4fd8;
  --vi: #8f7bff;
  --am: #ffb454;
  --grn: #68ffb0;
  --acc: #5cf2ff;
  --line: rgba(92, 242, 255, 0.16);
  --panel: rgba(9, 15, 31, 0.68);
  --panel-solid: #0a1122;
  --font-disp: "Michroma", "Noto Sans SC", sans-serif;
  --font-body: "Rajdhani", "Noto Sans SC", sans-serif;
  --font-mono: "Share Tech Mono", monospace;
  --font-cn: "Noto Sans SC", sans-serif;
  --nav-h: 64px;
}
body[data-page="anatomy"] { --acc: var(--mg); --line: rgba(255, 79, 216, 0.18); }
body[data-page="motion"]  { --acc: var(--vi); --line: rgba(143, 123, 255, 0.20); }
body[data-page="specs"]   { --acc: var(--am); --line: rgba(255, 180, 84, 0.18); }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  overflow-x: hidden;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--acc); color: #030509; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(92, 242, 255, 0.35), rgba(143, 123, 255, 0.35));
  border: 2px solid var(--bg);
  border-radius: 6px;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; background: none; border: none; }
button { cursor: pointer; }
img, svg, canvas { display: block; max-width: 100%; }

/* ---------- B. AMBIENT BACKGROUND LAYERS ---------- */
#stars {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
}
.bg-noise {
  position: fixed; inset: -50px; z-index: 1; pointer-events: none; opacity: 0.05;
  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.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}
.bg-scan {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.06;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(140, 220, 255, 0.28) 2px 3px);
  animation: scan-drift 9s linear infinite;
}
@keyframes scan-drift { to { background-position: 0 160px; } }
.aurora { position: fixed; z-index: 0; pointer-events: none; border-radius: 50%; filter: blur(90px); opacity: 0.5; }
.aurora-a {
  width: 62vmax; height: 62vmax; top: -28vmax; left: -18vmax;
  background: radial-gradient(circle at 40% 40%, rgba(38, 120, 255, 0.4), rgba(120, 60, 255, 0.16) 45%, transparent 70%);
  animation: aurora-a 26s ease-in-out infinite alternate;
}
.aurora-b {
  width: 52vmax; height: 52vmax; bottom: -24vmax; right: -16vmax;
  background: radial-gradient(circle at 60% 60%, rgba(255, 64, 200, 0.22), rgba(64, 220, 255, 0.1) 50%, transparent 72%);
  animation: aurora-b 32s ease-in-out infinite alternate;
}
@keyframes aurora-a {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(9vmax, 6vmax) scale(1.18); }
}
@keyframes aurora-b {
  0% { transform: translate(0, 0) scale(1.1); }
  100% { transform: translate(-8vmax, -5vmax) scale(0.94); }
}
.aurora-c {
  width: 44vmax; height: 44vmax; top: 4vmax; right: -16vmax;
  background: radial-gradient(circle at 50% 50%, rgba(143, 123, 255, 0.18), rgba(64, 200, 255, 0.07) 52%, transparent 72%);
  animation: aurora-c 21s ease-in-out infinite alternate;
}
@keyframes aurora-c {
  0% { transform: translate(0, 0) scale(0.92); opacity: 0.42; }
  100% { transform: translate(-7vmax, 5vmax) scale(1.14); opacity: 0.62; }
}
.gridfloor {
  position: absolute; left: -20%; right: -20%; bottom: -6%; height: 46%;
  z-index: 0; pointer-events: none; opacity: 0.5;
  background:
    linear-gradient(transparent 0%, rgba(60, 200, 255, 0.07) 100%),
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 90px),
    repeating-linear-gradient(0deg, var(--line) 0 1px, transparent 1px 60px);
  transform: perspective(700px) rotateX(58deg);
  transform-origin: bottom center;
  mask-image: linear-gradient(transparent 0%, #000 40%, #000 82%, transparent 100%);
  animation: floor-flow 7s linear infinite;
}
@keyframes floor-flow { to { background-position: 0 0, 0 0, 0 60px; } }
main { position: relative; z-index: 2; }

/* ---------- C. CUSTOM CURSOR ---------- */
#cur-ring, #cur-dot { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; }
#cur-ring {
  width: 34px; height: 34px; border: 1px solid var(--acc); border-radius: 50%;
  transform: translate(-50%, -50%); opacity: 0.85; mix-blend-mode: screen;
  transition: width 0.22s ease, height 0.22s ease, border-color 0.22s, background 0.22s;
}
#cur-dot {
  width: 4px; height: 4px; background: var(--acc); border-radius: 50%;
  transform: translate(-50%, -50%); box-shadow: 0 0 8px var(--acc);
}
#cur-ring.is-hot {
  width: 62px; height: 62px;
  background: radial-gradient(circle, rgba(92, 242, 255, 0.12), transparent 70%);
}
@media (hover: none), (pointer: coarse) { #cur-ring, #cur-dot { display: none; } }

/* ---------- D. SHARED UI: NAV / PANELS / BUTTONS / TYPE ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-h);
  display: flex; align-items: center; gap: 26px; padding: 0 clamp(16px, 3vw, 34px);
  background: linear-gradient(180deg, rgba(4, 7, 15, 0.92), rgba(4, 7, 15, 0.6) 70%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid transparent;
}
.logo { display: flex; align-items: baseline; gap: 10px; font-family: var(--font-disp); font-size: 15px; letter-spacing: 3px; }
.logo .blk { color: var(--acc); animation: led-blink 1.4s steps(2) infinite; }
.logo .sub { font-family: var(--font-cn); font-weight: 300; font-size: 11px; color: var(--mut); letter-spacing: 6px; }
@keyframes led-blink { 50% { opacity: 0.15; } }
.nav-links { display: flex; gap: 4px; margin-left: auto; }
.navlink {
  position: relative; display: flex; align-items: baseline; gap: 7px; padding: 9px 14px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 2px; color: var(--mut);
  transition: color 0.25s;
}
.navlink i { font-style: normal; font-size: 9px; color: var(--dim); }
.navlink::after {
  content: ""; position: absolute; left: 14px; right: 100%; bottom: 4px; height: 1px;
  background: var(--acc); box-shadow: 0 0 8px var(--acc); transition: right 0.3s ease;
}
.navlink:hover { color: var(--ink); }
.navlink:hover::after, .navlink.on::after { right: 14px; }
.navlink.on { color: var(--acc); }
.navlink.on i { color: var(--acc); }
.nav-sys {
  display: flex; align-items: center; gap: 10px; font-family: var(--font-mono);
  font-size: 11px; color: var(--mut); letter-spacing: 1px;
}
.led { width: 7px; height: 7px; border-radius: 50%; background: var(--grn); box-shadow: 0 0 10px var(--grn); animation: led-blink 2.2s steps(2) infinite; }
.btn-audio, .btn-music {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px; color: var(--mut);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: all 0.25s; white-space: nowrap;
}
.btn-audio:hover, .btn-music:hover { color: var(--acc); border-color: var(--acc); }
.btn-audio.on, .btn-music.on { color: var(--acc); border-color: var(--acc); box-shadow: inset 0 0 14px rgba(92, 242, 255, 0.12); }
body[data-page="specs"] .btn-music.on { color: var(--am); border-color: var(--am); }

/* corner-bracket panels */
.panel {
  position: relative; background: var(--panel); border: 1px solid var(--line);
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}
.crn { position: relative; }
.crn::before, .crn::after {
  content: ""; position: absolute; width: 20px; height: 20px; z-index: 3; pointer-events: none;
  border: 1.5px solid var(--acc); opacity: 0.8;
}
.crn::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.crn::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }

/* buttons */
.btn {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 26px; font-family: var(--font-mono); font-size: 13px; letter-spacing: 3px;
  color: var(--acc); border: 1px solid var(--acc); overflow: hidden;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  transition: color 0.3s, box-shadow 0.3s, background 0.3s; background: rgba(255, 255, 255, 0.01);
}
.btn::before {
  content: ""; position: absolute; inset: 0; background: var(--acc);
  transform: translateX(-101%); transition: transform 0.35s cubic-bezier(0.7, 0, 0.2, 1); z-index: -1;
}
.btn:hover { color: #04101a; box-shadow: 0 0 26px color-mix(in srgb, var(--acc) 55%, transparent); }
.btn:hover::before { transform: translateX(0); }
.btn.ghost { color: var(--mut); border-color: var(--line); }
.btn.ghost:hover { color: #04101a; border-color: var(--acc); }
.btn.sm { padding: 8px 16px; font-size: 11px; letter-spacing: 2px; }
.btn.on-state { background: color-mix(in srgb, var(--acc) 22%, transparent); color: var(--acc); }

/* typography helpers */
.kicker {
  display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 4px; color: var(--acc); text-transform: uppercase;
}
.kicker::before { content: ""; width: 34px; height: 1px; background: var(--acc); box-shadow: 0 0 8px var(--acc); }
.h-cn { font-family: var(--font-cn); font-weight: 900; letter-spacing: 0.06em; }
.sec-head { display: flex; align-items: flex-end; gap: 22px; flex-wrap: wrap; margin-bottom: 34px; }
.sec-head h2 { font-family: var(--font-disp); font-size: clamp(26px, 4vw, 44px); line-height: 1.05; letter-spacing: 2px; }
.sec-head h2 em { font-style: normal; color: var(--acc); text-shadow: 0 0 24px color-mix(in srgb, var(--acc) 60%, transparent); }
.sec-head .cn { font-family: var(--font-cn); font-weight: 300; color: var(--mut); letter-spacing: 8px; font-size: 15px; padding-bottom: 6px; }
.wrap { width: min(1240px, 92vw); margin: 0 auto; }

/* glitch title */
.glitch { position: relative; display: inline-block; }
.glitch::before, .glitch::after {
  content: attr(data-text); position: absolute; inset: 0; opacity: 0; pointer-events: none;
}
.glitch.glitching::before {
  opacity: 0.9; color: var(--mg); z-index: -1;
  animation: gl-a 0.42s steps(3) both;
}
.glitch.glitching::after {
  opacity: 0.9; color: var(--cy); z-index: -2;
  animation: gl-b 0.42s steps(3) both;
}
@keyframes gl-a {
  0% { clip-path: inset(12% 0 74% 0); transform: translate(-7px, -3px); }
  33% { clip-path: inset(64% 0 8% 0); transform: translate(6px, 2px); }
  66% { clip-path: inset(38% 0 42% 0); transform: translate(-4px, 1px); }
  100% { clip-path: inset(20% 0 66% 0); transform: translate(0); opacity: 0; }
}
@keyframes gl-b {
  0% { clip-path: inset(68% 0 6% 0); transform: translate(6px, 3px); }
  33% { clip-path: inset(10% 0 78% 0); transform: translate(-6px, -2px); }
  66% { clip-path: inset(45% 0 36% 0); transform: translate(5px, -1px); }
  100% { clip-path: inset(70% 0 10% 0); transform: translate(0); opacity: 0; }
}

/* reveal on scroll */
.rv { opacity: 0; transform: translateY(34px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: 0.1s; } .rv-d2 { transition-delay: 0.22s; } .rv-d3 { transition-delay: 0.34s; }

/* ---------- E. HOME PAGE ---------- */
.hero .light-sweep {
  position: absolute; top: -20%; bottom: -20%; width: 150px; left: -30%; z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(120, 240, 255, 0.11) 45%, rgba(255, 79, 216, 0.05) 60%, transparent);
  transform: skewX(-16deg); pointer-events: none; mix-blend-mode: screen;
  animation: sweep 7.5s cubic-bezier(0.6, 0, 0.3, 1) infinite;
}
@keyframes sweep {
  0% { left: -30%; opacity: 0; }
  8% { opacity: 1; }
  46% { left: 108%; opacity: 0; }
  100% { left: 108%; opacity: 0; }
}
.pulse-ring {
  position: absolute; top: 52%; left: 50%; width: 34vmin; height: 34vmin; margin: -17vmin 0 0 -17vmin;
  border: 1px solid rgba(92, 242, 255, 0.55); border-radius: 50%; pointer-events: none;
  animation: ring-out 4.2s cubic-bezier(0.2, 0.55, 0.3, 1) infinite;
}
.pulse-ring.p2 { animation-delay: 1.4s; border-color: rgba(255, 79, 216, 0.34); }
.pulse-ring.p3 { animation-delay: 2.8s; border-color: rgba(143, 123, 255, 0.4); }
@keyframes ring-out {
  0% { transform: scale(0.32); opacity: 0.8; }
  100% { transform: scale(2.05); opacity: 0; }
}
.dust { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.dust span {
  position: absolute; bottom: -6px; width: 3px; height: 3px; border-radius: 50%;
  background: rgba(150, 225, 255, 0.85); filter: drop-shadow(0 0 5px rgba(92, 242, 255, 0.9));
  animation: dust-up linear infinite;
}
.dust span:nth-child(1) { left: 6%; animation-duration: 9.5s; animation-delay: 0s; }
.dust span:nth-child(2) { left: 18%; animation-duration: 12s; animation-delay: 2.2s; width: 2px; height: 2px; }
.dust span:nth-child(3) { left: 33%; animation-duration: 8.5s; animation-delay: 4.4s; }
.dust span:nth-child(4) { left: 47%; animation-duration: 13s; animation-delay: 1.2s; width: 2px; height: 2px; }
.dust span:nth-child(5) { left: 60%; animation-duration: 10s; animation-delay: 5.4s; }
.dust span:nth-child(6) { left: 71%; animation-duration: 11.5s; animation-delay: 3s; width: 4px; height: 4px; }
.dust span:nth-child(7) { left: 83%; animation-duration: 9s; animation-delay: 6.2s; width: 2px; height: 2px; }
.dust span:nth-child(8) { left: 93%; animation-duration: 12.5s; animation-delay: 0.8s; }
@keyframes dust-up {
  0% { transform: translateY(0); opacity: 0; }
  7% { opacity: 0.9; }
  85% { opacity: 0.3; }
  100% { transform: translateY(-94vh); opacity: 0; }
}
.hero {
  position: relative; min-height: 100svh; display: grid; grid-template-columns: 1.15fr 0.85fr;
  align-items: center; gap: 2vw; padding: calc(var(--nav-h) + 4vh) 4vw 8vh; overflow: hidden;
}
.hero-copy { position: relative; z-index: 3; }
.hero .kicker { margin-bottom: 22px; }
.hero-title {
  font-family: var(--font-disp); font-size: clamp(44px, 7.2vw, 104px); line-height: 0.98;
  letter-spacing: 0.02em; text-shadow: 0 0 46px rgba(92, 242, 255, 0.35); cursor: default;
}
.hero-title .row2 { display: block; color: transparent; -webkit-text-stroke: 1.5px var(--acc); text-shadow: none; }
.hero-sub {
  margin-top: 26px; max-width: 540px; font-family: var(--font-cn); font-weight: 300;
  color: var(--mut); font-size: 15px; line-height: 2; letter-spacing: 2px;
}
.hero-sub b { color: var(--ink); font-weight: 500; }
.hero-cta { display: flex; gap: 16px; margin-top: 38px; flex-wrap: wrap; }
.term {
  margin-top: 46px; width: min(560px, 100%); padding: 18px 22px; font-family: var(--font-mono);
  font-size: 12.5px; line-height: 2.05; color: #8fd8ff; background: rgba(5, 12, 26, 0.72);
  border: 1px solid var(--line); cursor: pointer;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.term .term-hd { display: flex; justify-content: space-between; color: var(--dim); font-size: 10px; letter-spacing: 2px; margin-bottom: 8px; border-bottom: 1px dashed var(--line); padding-bottom: 8px; }
.term .ok { color: var(--grn); } .term .warn { color: var(--am); } .term .hi { color: var(--acc); }
.term .caret { display: inline-block; width: 8px; height: 14px; background: var(--acc); vertical-align: -2px; animation: led-blink 0.9s steps(2) infinite; }
.hero-stage { position: relative; z-index: 2; display: flex; justify-content: center; }
.hero-robot {
  width: min(46vh, 460px); filter: drop-shadow(0 0 34px rgba(92, 242, 255, 0.16));
  transform-style: preserve-3d; transition: transform 0.2s ease-out;
}
.hero-ring {
  position: absolute; top: 50%; left: 50%; border: 1px dashed var(--line); border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none;
}
.hero-ring.r1 { width: 34vmin; height: 34vmin; animation: spin 24s linear infinite; }
.hero-ring.r2 { width: 46vmin; height: 46vmin; border-color: rgba(255, 79, 216, 0.12); animation: spin 38s linear infinite reverse; }
.hero-ring.r2::before { content: ""; position: absolute; top: -4px; left: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--mg); box-shadow: 0 0 12px var(--mg); }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.hud-corner { position: absolute; width: 26px; height: 26px; border: 1.5px solid var(--acc); opacity: 0.55; pointer-events: none; }
.hud-corner.tl { top: 9vh; left: 3vw; border-right: none; border-bottom: none; }
.hud-corner.br { bottom: 7vh; right: 3vw; border-left: none; border-top: none; }
.hero-side {
  position: absolute; right: 2.2vw; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 14px; font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 2px; color: var(--dim); z-index: 3;
}
.hero-side span { display: flex; align-items: center; gap: 8px; }
.hero-side i { width: 5px; height: 5px; background: var(--acc); border-radius: 50%; box-shadow: 0 0 8px var(--acc); }
.scroll-cue {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 3;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 4px; color: var(--dim);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.scroll-cue::after { content: ""; width: 1px; height: 44px; background: linear-gradient(var(--acc), transparent); animation: cue-drop 1.8s ease-in-out infinite; }
@keyframes cue-drop { 0% { transform: scaleY(0); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: top; } 100% { transform: scaleY(1); opacity: 0; } }

/* home feature strip */
.features { padding: 10vh 0 12vh; }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.fcard {
  position: relative; padding: 30px 24px 26px; overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s;
  transform-style: preserve-3d; will-change: transform;
}
.fcard:hover { transform: translateY(-8px); border-color: var(--acc); box-shadow: 0 18px 50px -18px color-mix(in srgb, var(--acc) 45%, transparent); }
.fcard .idx { font-family: var(--font-mono); font-size: 11px; color: var(--dim); letter-spacing: 2px; }
.fcard .num { font-family: var(--font-disp); font-size: clamp(30px, 3vw, 44px); margin: 14px 0 4px; color: var(--ink); }
.fcard .num sub { font-size: 0.42em; color: var(--acc); vertical-align: baseline; }
.fcard .lbl { font-family: var(--font-cn); font-size: 13px; letter-spacing: 3px; color: var(--mut); }
.fcard .bar { margin-top: 18px; height: 2px; background: rgba(255, 255, 255, 0.07); }
.fcard .bar i { display: block; height: 100%; width: 0; background: var(--acc); box-shadow: 0 0 10px var(--acc); transition: width 1.4s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s; }
.fcard:hover .bar i, .in .fcard .bar i { width: var(--w, 80%); }

/* home portal cards */
.portals { padding: 4vh 0 14vh; }
.portal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.portal {
  position: relative; display: block; padding: 34px 28px 30px; overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s, box-shadow 0.4s;
}
.portal::before {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity 0.45s;
  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--pc) 16%, transparent), transparent 60%);
}
.portal:hover::before { opacity: 1; }
.portal:hover { transform: translateY(-10px); border-color: var(--pc); box-shadow: 0 26px 60px -24px color-mix(in srgb, var(--pc) 55%, transparent); }
.portal .p-no { font-family: var(--font-mono); font-size: 11px; letter-spacing: 3px; color: var(--pc); }
.portal h3 { font-family: var(--font-disp); font-size: 24px; margin: 14px 0 6px; letter-spacing: 1px; }
.portal .p-cn { font-family: var(--font-cn); font-weight: 300; letter-spacing: 6px; color: var(--mut); font-size: 13px; }
.portal p { margin-top: 14px; font-family: var(--font-cn); font-weight: 300; color: var(--mut); font-size: 13px; line-height: 1.9; }
.portal .go { margin-top: 22px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 3px; color: var(--pc); display: flex; align-items: center; gap: 8px; }
.portal .go::after { content: "→"; transition: transform 0.3s; }
.portal:hover .go::after { transform: translateX(8px); }
.portal-01 { --pc: var(--mg); } .portal-02 { --pc: var(--vi); } .portal-03 { --pc: var(--am); }

/* ---------- F. ANATOMY PAGE ---------- */
.page-head { padding: calc(var(--nav-h) + 7vh) 0 3vh; }
.page-head .ph-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.page-head h1 { font-family: var(--font-disp); font-size: clamp(34px, 5.4vw, 64px); letter-spacing: 2px; line-height: 1.05; }
.page-head h1 em { font-style: normal; color: var(--acc); text-shadow: 0 0 26px color-mix(in srgb, var(--acc) 55%, transparent); }
.page-head .ph-cn { font-family: var(--font-cn); font-weight: 300; letter-spacing: 10px; color: var(--mut); font-size: 15px; }
.page-desc { margin-top: 16px; max-width: 640px; font-family: var(--font-cn); font-weight: 300; color: var(--mut); line-height: 2; font-size: 14px; letter-spacing: 1px; }

.anatomy-lab {
  display: grid; grid-template-columns: 280px 1fr 300px; gap: 20px; align-items: stretch;
  padding: 2vh 0 6vh; min-height: 72vh;
}
.an-left, .an-right { display: flex; flex-direction: column; gap: 16px; }
.an-panel { padding: 22px 20px; }
.an-panel h4 { font-family: var(--font-mono); font-size: 12px; letter-spacing: 3px; color: var(--acc); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.an-panel h4::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.part-list { display: flex; flex-direction: column; gap: 6px; }
.part-item {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; text-align: left; width: 100%;
  font-family: var(--font-cn); font-size: 13px; letter-spacing: 2px; color: var(--mut);
  border: 1px solid transparent; transition: all 0.25s;
}
.part-item i { font-family: var(--font-mono); font-size: 9px; color: var(--dim); font-style: normal; }
.part-item:hover { color: var(--ink); background: rgba(255, 255, 255, 0.03); }
.part-item.on { color: var(--acc); border-color: var(--line); background: color-mix(in srgb, var(--acc) 7%, transparent); box-shadow: inset 3px 0 0 var(--acc); }
.explode-ctl { display: flex; flex-direction: column; gap: 14px; }
.explode-ctl label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px; color: var(--mut); display: flex; justify-content: space-between; }
.explode-ctl label b { color: var(--acc); font-weight: 400; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 2px; background: rgba(255, 255, 255, 0.14); outline: none; }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #fff, var(--acc) 60%);
  box-shadow: 0 0 14px var(--acc); cursor: grab; border: none;
}
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: var(--acc);
  box-shadow: 0 0 14px var(--acc); cursor: grab; border: none;
}
.preset-row { display: flex; gap: 8px; flex-wrap: wrap; }
.an-center {
  position: relative; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(58% 58% at 50% 46%, rgba(255, 79, 216, 0.08), transparent 70%),
              radial-gradient(40% 40% at 50% 50%, rgba(92, 242, 255, 0.05), transparent 70%);
  border: 1px solid var(--line); overflow: hidden; min-height: 560px;
  clip-path: polygon(26px 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%, 0 26px);
}
.an-center .gridfloor { opacity: 0.32; height: 34%; }
.an-center .robot {
  height: min(64vh, 560px); width: auto; z-index: 2; position: relative;
  transition: transform 0.4s ease-out; filter: drop-shadow(0 0 30px rgba(255, 79, 216, 0.14));
}
.an-center.cruise .robot { animation: an-sway 9s ease-in-out infinite; }
@keyframes an-sway {
  0%, 100% { transform: rotateY(-8deg) rotateZ(-1deg); }
  50% { transform: rotateY(8deg) rotateZ(1deg); }
}
.an-center { perspective: 1100px; }
.an-tip {
  position: absolute; z-index: 6; pointer-events: none; padding: 6px 12px; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 2px; color: var(--acc); background: rgba(6, 10, 22, 0.9);
  border: 1px solid var(--acc); white-space: nowrap; opacity: 0; transform: translate(14px, 14px);
  transition: opacity 0.15s;
}
.an-info { min-height: 300px; }
.an-info .p-id { font-family: var(--font-mono); font-size: 11px; color: var(--dim); letter-spacing: 2px; }
.an-info h3 { font-family: var(--font-disp); font-size: 26px; margin: 10px 0 2px; letter-spacing: 1px; color: var(--acc); text-shadow: 0 0 20px color-mix(in srgb, var(--acc) 50%, transparent); }
.an-info .p-cn { font-family: var(--font-cn); font-weight: 300; letter-spacing: 6px; color: var(--mut); font-size: 13px; margin-bottom: 14px; }
.an-info p { font-family: var(--font-cn); font-weight: 300; font-size: 13px; line-height: 2; color: var(--mut); }
.spec-bars { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.sbar { display: grid; grid-template-columns: 62px 1fr 40px; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; color: var(--mut); }
.sbar .tr { height: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.sbar .tr i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--acc), #fff); box-shadow: 0 0 8px var(--acc); transition: width 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
.sbar b { color: var(--acc); font-weight: 400; text-align: right; }

/* ---------- G. MOTION PAGE ---------- */
.motion-lab {
  display: grid; grid-template-columns: 1fr 340px; gap: 20px; padding: 2vh 0 8vh; align-items: start;
}
.motion-stage {
  position: relative; overflow: hidden; height: min(74vh, 640px); display: flex; align-items: flex-end; justify-content: center;
  background: radial-gradient(60% 60% at 50% 40%, rgba(143, 123, 255, 0.1), transparent 70%);
  border: 1px solid var(--line);
  clip-path: polygon(26px 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%, 0 26px);
}
.motion-stage .gridfloor { height: 38%; opacity: 0.6; }
.motion-stage .speedlines {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.7; z-index: 1;
  background: repeating-linear-gradient(180deg, transparent 0 44px, rgba(160, 205, 255, 0.055) 44px 46px);
  mask-image: linear-gradient(transparent 4%, #000 30%, #000 78%, transparent 100%);
  animation: speed-drop 1.4s linear infinite;
}
.motion-stage.gait-fast .speedlines { animation-duration: 0.55s; opacity: 1; }
@keyframes speed-drop { to { background-position: 0 92px; } }
.motion-stage .robot { height: min(54vh, 470px); width: auto; margin-bottom: 5vh; position: relative; z-index: 2; filter: drop-shadow(0 0 34px rgba(143, 123, 255, 0.2)); }
.motion-hud {
  position: absolute; top: 18px; left: 20px; right: 20px; z-index: 3; display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px; color: var(--mut); pointer-events: none;
}
.motion-hud b { color: var(--acc); font-weight: 400; }
.gait-badge {
  position: absolute; top: 18px; right: 20px; z-index: 3; padding: 8px 16px; font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 3px; color: var(--acc); border: 1px solid var(--acc);
  background: color-mix(in srgb, var(--acc) 8%, transparent); text-shadow: 0 0 12px var(--acc);
}
.motion-ctl { display: flex; flex-direction: column; gap: 16px; }
.gait-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gait-btn {
  padding: 14px 12px; text-align: left; border: 1px solid var(--line); color: var(--mut);
  transition: all 0.25s; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.gait-btn .g-en { font-family: var(--font-disp); font-size: 14px; letter-spacing: 1px; display: block; }
.gait-btn .g-cn { font-family: var(--font-cn); font-size: 11px; letter-spacing: 4px; font-weight: 300; opacity: 0.8; }
.gait-btn:hover { color: var(--ink); border-color: color-mix(in srgb, var(--acc) 50%, transparent); }
.gait-btn.on { color: var(--acc); border-color: var(--acc); background: color-mix(in srgb, var(--acc) 10%, transparent); box-shadow: 0 0 24px -6px color-mix(in srgb, var(--acc) 50%, transparent); }
.tele-canvas { width: 100%; height: 150px; background: rgba(4, 8, 18, 0.7); border: 1px solid var(--line); }
.tele-legend { display: flex; gap: 16px; margin-top: 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; color: var(--dim); }
.tele-legend i { display: inline-block; width: 14px; height: 2px; margin-right: 6px; vertical-align: middle; }
.readout-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.readout { padding: 14px 14px 12px; border: 1px solid var(--line); background: rgba(4, 8, 18, 0.5); }
.readout .r-lb { font-family: var(--font-cn); font-size: 10px; letter-spacing: 3px; color: var(--dim); font-weight: 300; }
.readout .r-vl { font-family: var(--font-disp); font-size: 22px; margin-top: 6px; color: var(--acc); text-shadow: 0 0 14px color-mix(in srgb, var(--acc) 45%, transparent); }
.readout .r-un { font-family: var(--font-mono); font-size: 9px; color: var(--dim); margin-left: 4px; }
.motion-note { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }
.mnote {
  display: flex; gap: 14px; align-items: baseline; padding: 14px 18px; font-family: var(--font-cn);
  font-weight: 300; font-size: 13px; color: var(--mut); line-height: 1.9; letter-spacing: 1px;
}
.mnote b { font-family: var(--font-mono); color: var(--acc); font-weight: 400; font-size: 12px; white-space: nowrap; }

/* ---------- H. SPECS PAGE ---------- */
.specs-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 20px; padding: 2vh 0 5vh; }
.radar-panel { padding: 28px; display: flex; flex-direction: column; align-items: center; }
.radar-panel h3, .core-panel h3 { font-family: var(--font-mono); font-size: 12px; letter-spacing: 3px; color: var(--acc); align-self: flex-start; margin-bottom: 12px; }
#radar-cv { width: 100%; max-width: 460px; aspect-ratio: 1; }
.core-panel { padding: 28px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.core-orb-wrap { position: relative; width: 230px; height: 230px; margin: 14px 0 6px; cursor: pointer; }
.core-orb {
  position: absolute; inset: 30px; border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #fff, #9df6ff 18%, #2ec9ff 45%, #123a8f 78%, #061024 100%);
  box-shadow: 0 0 60px rgba(92, 242, 255, 0.55), 0 0 140px rgba(92, 242, 255, 0.25), inset 0 0 40px rgba(255, 255, 255, 0.35);
  animation: core-breath 3.4s ease-in-out infinite;
}
@keyframes core-breath { 50% { transform: scale(1.055); filter: brightness(1.18); } }
.core-orb-ring { position: absolute; inset: 8px; border: 1px dashed rgba(255, 180, 84, 0.5); border-radius: 50%; animation: spin-c 16s linear infinite; }
.core-orb-ring2 { position: absolute; inset: -6px; border: 1px solid rgba(92, 242, 255, 0.25); border-radius: 50%; animation: spin-c 26s linear infinite reverse; }
.core-orb-ring::before { content: ""; position: absolute; top: -3px; left: 50%; width: 6px; height: 6px; background: var(--am); border-radius: 50%; box-shadow: 0 0 10px var(--am); }
@keyframes spin-c { to { transform: rotate(360deg); } }
.core-charge { font-family: var(--font-disp); font-size: 34px; color: var(--am); text-shadow: 0 0 22px rgba(255, 180, 84, 0.6); }
.core-charge small { font-size: 14px; color: var(--mut); margin-left: 6px; }
.core-hint { font-family: var(--font-cn); font-weight: 300; font-size: 12px; letter-spacing: 3px; color: var(--dim); }
.core-orb-wrap.burst .core-orb { animation: core-burst 0.6s ease-out; }
@keyframes core-burst { 30% { transform: scale(1.22); filter: brightness(1.8); } }
.core-ripple {
  position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--am); opacity: 0;
  pointer-events: none; animation: ripple 0.9s ease-out forwards;
}
@keyframes ripple { 0% { transform: scale(0.55); opacity: 0.9; } 100% { transform: scale(1.5); opacity: 0; } }
.spec-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 4vh 0 8vh; }
.scard { position: relative; padding: 26px 22px; overflow: hidden; transition: transform 0.35s, border-color 0.35s, box-shadow 0.35s; }
.scard:hover { transform: translateY(-6px); border-color: var(--acc); box-shadow: 0 18px 44px -20px color-mix(in srgb, var(--acc) 50%, transparent); }
.scard .s-ic { font-family: var(--font-mono); font-size: 12px; color: var(--acc); letter-spacing: 2px; }
.scard h4 { font-family: var(--font-cn); font-weight: 700; font-size: 16px; letter-spacing: 3px; margin: 12px 0 10px; }
.scard p { font-family: var(--font-cn); font-weight: 300; font-size: 12.5px; line-height: 1.95; color: var(--mut); }
.scard .s-val { margin-top: 16px; font-family: var(--font-disp); font-size: 20px; color: var(--ink); opacity: 0; transform: translateY(8px); transition: all 0.35s; }
.scard:hover .s-val { opacity: 1; transform: none; color: var(--acc); }
.timeline { position: relative; padding: 3vh 0 9vh; }
.tl-line { position: absolute; left: 50%; top: 12vh; bottom: 6vh; width: 1px; background: linear-gradient(var(--acc), rgba(92, 242, 255, 0.05)); }
.tl-item { position: relative; width: 50%; padding: 0 46px 56px; }
.tl-item:nth-child(odd) { left: 0; text-align: right; }
.tl-item:nth-child(even) { left: 50%; }
.tl-item::before {
  content: ""; position: absolute; top: 8px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--acc); box-shadow: 0 0 16px var(--acc); z-index: 2;
}
.tl-item:nth-child(odd)::before { right: -6px; }
.tl-item:nth-child(even)::before { left: -6px; }
.tl-item .t-yr { font-family: var(--font-disp); font-size: 26px; color: var(--acc); letter-spacing: 2px; text-shadow: 0 0 18px color-mix(in srgb, var(--acc) 50%, transparent); }
.tl-item h5 { font-family: var(--font-cn); font-weight: 700; font-size: 15px; letter-spacing: 3px; margin: 8px 0 6px; }
.tl-item p { font-family: var(--font-cn); font-weight: 300; font-size: 12.5px; color: var(--mut); line-height: 1.9; }

/* ---------- I. ROBOT SVG & GAIT ENGINE ---------- */
.robot { --rb: #5cf2ff; overflow: visible; }
.robot .mt  { fill: url(#r-metal);  stroke: #2e4470; stroke-width: 0.9; }
.robot .mt2 { fill: url(#r-metal2); stroke: #33477a; stroke-width: 0.8; }
.robot .dk  { fill: #0a1226; stroke: #22345c; stroke-width: 0.8; }
.robot .ln  { stroke: #40608f; stroke-width: 0.7; fill: none; opacity: 0.75; }
.robot .neon { stroke: var(--rb); stroke-width: 1.1; fill: none; }
.robot .dot { fill: var(--rb); filter: url(#f-glow); }
.robot .vis { fill: url(#r-visor); stroke: #8be9ff; stroke-width: 0.6; }
.robot .rshadow { fill: url(#r-glow); opacity: 0.55; }
.robot .part { cursor: pointer; }
.robot .jt { transform-origin: 0px 0px; }
.robot [data-ex] { transition: none; }
.robot .rv { fill: #8a97ab; }
.robot .hz { fill: url(#p-hazard); stroke: #0a0c11; stroke-width: 0.5; }
.robot .hi { stroke: #8b9cb8; stroke-width: 1; fill: none; opacity: 0.5; }
.robot .grain { filter: url(#f-grain); }
.robot .neon.amber { stroke: #e8a34a; }
.robot .eye { fill: url(#r-eye); filter: url(#f-glow); animation: eye-pulse 3.2s ease-in-out infinite; }
.robot .spin { transform-origin: 0 0; animation: turbine-spin 2.6s linear infinite; }
.robot .tb { fill: #b8ecff; opacity: 0.92; stroke: #3586b8; stroke-width: 0.4; }
@keyframes turbine-spin { to { transform: rotate(360deg); } }
@keyframes eye-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.78; } }

/* hero float */
.mode-hero .float { animation: r-float 4.6s ease-in-out infinite; }
@keyframes r-float { 50% { transform: translateY(-12px); } }

/* core pulse + visor scan + antenna */
.core-halo { transform-origin: 0 0; animation: core-pulse 2.4s ease-in-out infinite; }
@keyframes core-pulse { 0%, 100% { transform: scale(0.82); opacity: 0.45; } 50% { transform: scale(1.12); opacity: 0.8; } }
.core-ring { animation: core-hue 6s linear infinite; }
@keyframes core-hue { to { filter: hue-rotate(360deg); } }
.vscan { animation: scan-sweep 3.2s ease-in-out infinite; }
@keyframes scan-sweep { 0%, 8% { transform: translateX(-30px); } 46%, 54% { transform: translateX(30px); } 92%, 100% { transform: translateX(-30px); } }
.antenna-dot { animation: led-blink 1.6s steps(2) infinite; }

/* anatomy interactions */
.mode-anatomy .part { transition: opacity 0.35s, filter 0.35s; }
.mode-anatomy .part:hover { filter: brightness(1.35) drop-shadow(0 0 8px rgba(255, 79, 216, 0.8)); }
.mode-anatomy.has-sel .part { opacity: 0.16; }
.mode-anatomy.has-sel .part.on-part { opacity: 1; filter: drop-shadow(0 0 10px rgba(255, 79, 216, 0.7)); }
.xwire { stroke: #ff4fd8; stroke-width: 0.8; stroke-dasharray: 3 6; opacity: 0; }
.xnode { fill: #ff4fd8; opacity: 0; }

/* jet flames removed — no exhaust stacks */
.gait-run .spin { animation-duration: 0.5s; }

/* ---- GAIT: WALK (front-view marching, stepping toward viewer) ---- */
.gait-walk .j-thighL { animation: wkThigh var(--dur, 1.6s) cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.gait-walk .j-thighR { animation: wkThigh var(--dur, 1.6s) cubic-bezier(0.4, 0, 0.6, 1) infinite calc(var(--dur, 1.6s) / -2); }
.gait-walk .j-shinL  { animation: wkShin var(--dur, 1.6s) cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.gait-walk .j-shinR  { animation: wkShin var(--dur, 1.6s) cubic-bezier(0.4, 0, 0.6, 1) infinite calc(var(--dur, 1.6s) / -2); }
.gait-walk .j-footL  { animation: wkFoot var(--dur, 1.6s) cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.gait-walk .j-footR  { animation: wkFoot var(--dur, 1.6s) cubic-bezier(0.4, 0, 0.6, 1) infinite calc(var(--dur, 1.6s) / -2); }
.gait-walk .j-armL   { animation: wkArm var(--dur, 1.6s) ease-in-out infinite calc(var(--dur, 1.6s) / -2); }
.gait-walk .j-armR   { animation: wkArm var(--dur, 1.6s) ease-in-out infinite; }
.gait-walk .j-foreL  { animation: wkFore var(--dur, 1.6s) ease-in-out infinite calc(var(--dur, 1.6s) / -2); }
.gait-walk .j-foreR  { animation: wkFore var(--dur, 1.6s) ease-in-out infinite; }
.gait-walk .j-head   { animation: wkHead var(--dur, 1.6s) ease-in-out infinite; }
.gait-walk .float    { animation: wkBob var(--dur, 1.6s) ease-in-out infinite; }
.gait-walk .lean     { animation: wkLean calc(var(--dur, 1.6s) * 2) ease-in-out infinite; }
@keyframes wkThigh { 0%, 55%, 100% { transform: translateY(0) rotate(0deg); } 22% { transform: translateY(-14px) rotate(2deg); } 40% { transform: translateY(-4px) rotate(-1deg); } }
@keyframes wkShin  { 0%, 55%, 100% { transform: rotate(0deg); } 16% { transform: rotate(16deg); } 26% { transform: rotate(30deg); } 42% { transform: rotate(5deg); } }
@keyframes wkFoot  { 0%, 55%, 100% { transform: rotate(0deg); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(8deg); } }
@keyframes wkArm   { 0%, 100% { transform: rotate(2deg) translateY(0); } 25% { transform: rotate(-3deg) translateY(-4px); } 60% { transform: rotate(3deg) translateY(1px); } }
@keyframes wkFore  { 0%, 100% { transform: rotate(9deg); } 25% { transform: rotate(15deg); } }
@keyframes wkHead  { 0%, 50%, 100% { transform: translateY(0); } 25% { transform: translateY(1.6px); } 75% { transform: translateY(1.6px); } }
@keyframes wkBob   { 0%, 50%, 100% { transform: translateY(0); } 25% { transform: translateY(-5px); } 75% { transform: translateY(-5px); } }
@keyframes wkLean  { 0%, 100% { transform: rotate(-1.1deg); } 50% { transform: rotate(1.1deg); } }

/* ---- GAIT: RUN (front-view sprint) ---- */
.gait-run .lean    { transform: rotate(1.6deg) scaleY(1.01); }
.gait-run .j-thighL { animation: rnThigh var(--dur, 0.8s) cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.gait-run .j-thighR { animation: rnThigh var(--dur, 0.8s) cubic-bezier(0.4, 0, 0.6, 1) infinite calc(var(--dur, 0.8s) / -2); }
.gait-run .j-shinL  { animation: rnShin var(--dur, 0.8s) cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.gait-run .j-shinR  { animation: rnShin var(--dur, 0.8s) cubic-bezier(0.4, 0, 0.6, 1) infinite calc(var(--dur, 0.8s) / -2); }
.gait-run .j-footL  { animation: rnFoot var(--dur, 0.8s) cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.gait-run .j-footR  { animation: rnFoot var(--dur, 0.8s) cubic-bezier(0.4, 0, 0.6, 1) infinite calc(var(--dur, 0.8s) / -2); }
.gait-run .j-armL   { animation: rnArm var(--dur, 0.8s) ease-in-out infinite calc(var(--dur, 0.8s) / -2); }
.gait-run .j-armR   { animation: rnArm var(--dur, 0.8s) ease-in-out infinite; }
.gait-run .j-foreL, .gait-run .j-foreR { animation: rnFore calc(var(--dur, 0.8s) / 2) ease-in-out infinite; }
.gait-run .float { animation: rnBob calc(var(--dur, 0.8s) / 2) ease-in-out infinite; }
.gait-run .j-head { animation: rnHead var(--dur, 0.8s) ease-in-out infinite; }
@keyframes rnThigh { 0%, 52%, 100% { transform: translateY(0) rotate(0deg); } 20% { transform: translateY(-24px) rotate(3deg); } 38% { transform: translateY(-7px) rotate(-2deg); } }
@keyframes rnShin  { 0%, 52%, 100% { transform: rotate(2deg); } 14% { transform: rotate(24deg); } 24% { transform: rotate(50deg); } 40% { transform: rotate(8deg); } }
@keyframes rnFoot  { 0%, 52%, 100% { transform: rotate(0deg); } 18% { transform: rotate(-22deg); } 38% { transform: rotate(14deg); } }
@keyframes rnArm   { 0%, 100% { transform: rotate(5deg) translateY(0); } 22% { transform: rotate(-9deg) translateY(-9px); } 55% { transform: rotate(7deg) translateY(3px); } }
@keyframes rnFore  { 0%, 100% { transform: rotate(18deg); } 50% { transform: rotate(34deg); } }
@keyframes rnBob   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes rnHead  { 0%, 50%, 100% { transform: translateY(0); } 25% { transform: translateY(2.4px); } 75% { transform: translateY(2.4px); } }

/* ---- GAIT: BALANCE ---- */
.gait-balance .lean { animation: blSway 3.4s ease-in-out infinite; }
.gait-balance .j-armL { animation: blArmL 3.4s ease-in-out infinite; }
.gait-balance .j-armR { animation: blArmR 3.4s ease-in-out infinite; }
.gait-balance .j-foreL, .gait-balance .j-foreR { transform: rotate(10deg); }
.gait-balance .j-thighL, .gait-balance .j-thighR { transform: rotate(1.5deg); }
.gait-balance .j-shinL, .gait-balance .j-shinR { transform: rotate(-2deg); }
.gait-balance .j-head { animation: blHead 5.2s ease-in-out infinite; }
@keyframes blSway { 0%, 100% { transform: rotate(-2.6deg); } 50% { transform: rotate(2.6deg); } }
@keyframes blArmL { 0%, 100% { transform: rotate(42deg); } 50% { transform: rotate(52deg); } }
@keyframes blArmR { 0%, 100% { transform: rotate(-52deg); } 50% { transform: rotate(-42deg); } }
@keyframes blHead { 0%, 100% { transform: rotate(-13deg); } 50% { transform: rotate(13deg); } }

/* ---- GAIT: DANCE ---- */
.gait-dance .float { animation: dnBob calc(var(--dur, 1.1s) / 2) cubic-bezier(0.3, 0, 0.4, 1) infinite; }
.gait-dance .j-thighL, .gait-dance .j-thighR { animation: dnThigh var(--dur, 1.1s) ease-in-out infinite; }
.gait-dance .j-shinL, .gait-dance .j-shinR { animation: dnShin var(--dur, 1.1s) ease-in-out infinite; }
.gait-dance .j-armL { animation: dnArmL var(--dur, 1.1s) ease-in-out infinite; }
.gait-dance .j-armR { animation: dnArmR var(--dur, 1.1s) ease-in-out infinite; }
.gait-dance .j-foreL { animation: dnFore var(--dur, 1.1s) ease-in-out infinite; }
.gait-dance .j-foreR { animation: dnFore var(--dur, 1.1s) ease-in-out infinite calc(var(--dur, 1.1s) / -2); }
.gait-dance .j-head { animation: dnHead calc(var(--dur, 1.1s) / 2) ease-in-out infinite; }
.gait-dance .lean { animation: dnLean var(--dur, 1.1s) ease-in-out infinite; }
@keyframes dnBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
@keyframes dnThigh { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(16deg); } }
@keyframes dnShin { 0%, 100% { transform: rotate(6deg); } 50% { transform: rotate(30deg); } }
@keyframes dnArmL { 0%, 100% { transform: rotate(26deg); } 50% { transform: rotate(-158deg); } }
@keyframes dnArmR { 0%, 100% { transform: rotate(158deg); } 50% { transform: rotate(-26deg); } }
@keyframes dnFore { 0%, 100% { transform: rotate(30deg); } 50% { transform: rotate(-24deg); } }
@keyframes dnHead { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes dnLean { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }

.robot.paused * { animation-play-state: paused !important; }

/* ---------- J. FOOTER / REVEAL / RESPONSIVE ---------- */
.ticker {
  overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 14px 0; position: relative; z-index: 2; background: rgba(4, 8, 18, 0.5);
}
.ticker-in {
  display: flex; gap: 48px; width: max-content; font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 3px; color: var(--dim); animation: ticker-scroll 30s linear infinite; white-space: nowrap;
}
.ticker-in b { color: var(--acc); font-weight: 400; }
@keyframes ticker-scroll { to { transform: translateX(-50%); } }
footer {
  position: relative; z-index: 2; padding: 40px 4vw 34px; display: flex; flex-wrap: wrap; gap: 20px;
  align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 2px; color: var(--dim);
}
footer .f-logo { font-family: var(--font-disp); color: var(--mut); letter-spacing: 3px; font-size: 13px; }
@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr; padding-top: calc(var(--nav-h) + 2vh); text-align: left; }
  .hero-side { display: none; }
  .anatomy-lab { grid-template-columns: 1fr; }
  .an-center { min-height: 480px; }
  .motion-lab { grid-template-columns: 1fr; }
  .specs-grid { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .spec-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .nav { gap: 12px; }
  .nav-sys .sys-txt { display: none; }
  .navlink { padding: 9px 8px; }
  .portal-grid, .feature-grid, .spec-cards { grid-template-columns: 1fr; }
  .tl-line { left: 12px; }
  .tl-item, .tl-item:nth-child(even) { width: 100%; left: 0; text-align: left; padding: 0 0 44px 36px; }
  .tl-item:nth-child(odd)::before, .tl-item:nth-child(even)::before { left: 6px; right: auto; }
}