@font-face {
  font-family: "ZCOOL XiaoWei";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/zcool-xiaowei-cn-400.subset.woff2") format("woff2");
}

:root {
  --ink: #101317;
  --ink-soft: #262c34;
  --white: #ffffff;
  --sky: #edf4f8;
  --sky-deep: #b7d5ea;
  --blue: #2879ed;
  --teal: #19b99e;
  --orange: #ff7848;
  --muted: #606b78;
  --muted-light: #8b96a3;
  --line: #dfe7ed;
  --line-dark: rgba(255, 255, 255, 0.13);
  --surface-soft: #f4f7f9;
  --page-wash: rgba(246, 249, 251, 0.74);
  --panel: rgba(255, 255, 255, 0.92);
  --shadow: 0 24px 70px -38px rgba(22, 42, 60, 0.33), 0 2px 8px rgba(22, 42, 60, 0.05);
  --shadow-high: 0 42px 100px -44px rgba(13, 40, 65, 0.42), 0 3px 12px rgba(13, 40, 65, 0.07);
  --sans: "Inter", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --serif: "Songti SC", "STSong", "Noto Serif SC", Georgia, serif;
  --shell: min(1220px, calc(100vw - 64px));
  --section-space: 120px;
  --identity-overlap: 46px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; background: #edf2f7; }
body {
  position: relative; isolation: isolate; min-height: 100%; margin: 0;
  color: var(--ink);
  background: transparent;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: ""; position: fixed; z-index: -1; inset: -10% -8%; pointer-events: none;
  background-image: linear-gradient(180deg, rgba(237,244,248,.42), rgba(255,255,255,.72)), url("assets/cirrus/images/sky-horizon-hero.png");
  background-repeat: no-repeat; background-size: 100% 100%, cover; background-position: center, center bottom;
  opacity: .34; transform: translate3d(-3%, 0, 0) scale(1.08); transform-origin: center;
  animation: pageCloudDrift 72s ease-in-out -19s infinite; will-change: transform;
}
@keyframes pageCloudDrift {
  0%, 100% { transform: translate3d(-3%, 0, 0) scale(1.08); }
  46% { transform: translate3d(2.4%, -1%, 0) scale(1.1); }
  72% { transform: translate3d(3%, -.4%, 0) scale(1.09); }
}

body.menu-open { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

:focus-visible { outline: 3px solid rgba(40, 121, 237, 0.28); outline-offset: 3px; }
::selection { color: var(--ink); background: rgba(25, 185, 158, 0.24); }
.shell { width: var(--shell); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; z-index: 1000; top: 10px; left: 10px; padding: 10px 16px;
  border-radius: 999px; color: var(--white); background: var(--ink); transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: absolute; z-index: 50; top: 0; left: 0; width: 100%; padding-top: 18px;
}
.site-header.is-sticky { position: fixed; padding-top: 10px; animation: headerIn 0.4s var(--ease); }
.site-header.is-sticky .nav-wrap {
  border: 1px solid rgba(217, 228, 236, 0.9); background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 40px -22px rgba(22, 42, 60, 0.3); backdrop-filter: blur(16px);
}
@keyframes headerIn { from { transform: translateY(-110%); } }

.nav-wrap {
  min-height: 66px; padding: 7px 8px 7px 12px; display: flex; align-items: center;
  justify-content: space-between; gap: 24px; border: 1px solid transparent; border-radius: 999px;
  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.brand { display: inline-flex; align-items: center; gap: 11px; min-width: max-content; }
.brand-mark {
  position: relative; width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid rgba(210, 223, 232, 0.9); color: var(--ink); background: rgba(255, 255, 255, 0.78); border-radius: 50%;
}
.brand-mark img { position: relative; z-index: 2; width: 31px; height: 31px; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.15; }
.brand-copy strong { font-size: 17px; font-weight: 700; }
.brand-copy small { margin-top: 4px; font-size: 9px; color: var(--muted); letter-spacing: 0; }
.desktop-nav {
  display: flex; align-items: center; gap: 28px; margin-left: auto;
}
.desktop-nav a { position: relative; padding: 4px 0; color: var(--muted); font-size: 13px; transition: color 0.2s ease; }
.desktop-nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--ink); transition: right 0.25s var(--ease); }
.desktop-nav a:hover, .desktop-nav a.is-active { color: var(--ink); }
.desktop-nav a:hover::after, .desktop-nav a.is-active::after { right: 0; }

.button {
  min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 0 21px; border: 1px solid transparent; border-radius: 999px; font-size: 14px;
  font-weight: 650; letter-spacing: 0; cursor: pointer; transition: transform 0.2s var(--ease), box-shadow 0.2s ease, background 0.2s ease;
}
.button svg { width: 17px; height: 17px; stroke-width: 1.8; }
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0); }
.button-dark { color: var(--white); background: var(--ink); box-shadow: 0 16px 30px -20px rgba(16, 19, 23, 0.8); }
.button-dark:hover { background: var(--ink-soft); box-shadow: 0 18px 32px -18px rgba(16, 19, 23, 0.75); }
.button-light { color: var(--ink); background: rgba(255, 255, 255, 0.86); border-color: rgba(215, 226, 234, 0.95); }
.button-light:hover { background: var(--white); }
.button-large { min-height: 52px; padding-inline: 25px; font-size: 15px; }
.header-cta { min-height: 44px; }
.menu-toggle {
  display: none; width: 44px; height: 44px; place-items: center; padding: 0; border: 0;
  border-radius: 50%; color: var(--white); background: var(--ink);
}
.menu-toggle svg { width: 20px; height: 20px; }
.mobile-menu { display: none; }

.sky-stage {
  --hero-scroll: 0;
  --cloud-base-x: 0px; --cloud-base-y: 0px;
  --cloud-far-x: 0px; --cloud-far-y: 0px;
  --cloud-mid-x: 0px; --cloud-mid-y: 0px;
  --cloud-near-x: 0px; --cloud-near-y: 0px;
  position: relative; min-height: 820px; overflow: hidden; isolation: isolate;
  background-color: var(--sky); background-image: linear-gradient(180deg, rgba(182, 213, 235, 0.44) 0%, rgba(237, 244, 248, 0.24) 45%, #eef4f8 100%), url("assets/cirrus/images/sky-horizon-hero.png");
  background-size: 100% 100%, cover; background-position: center, center bottom;
}
.sky-stage::after {
  content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 240px;
  background: linear-gradient(180deg, rgba(237, 242, 247, 0), #edf2f7 92%); pointer-events: none;
}
.hero-inner { position: relative; z-index: 3; padding-top: 164px; }

/* The original Cirrus sky remains the fallback. This duplicate only appears after the image decodes. */
.cloudscape {
  position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none;
  opacity: 0; transition: opacity 1.4s var(--ease); contain: paint;
}
.sky-stage.clouds-ready .cloudscape { opacity: 1; }
.cloud-layer {
  position: absolute; inset: -9% -12% -10%;
  transition: transform 1.2s var(--ease); will-change: transform;
}
.cloud-drift {
  position: absolute; inset: 0; display: block;
  background-image: url("assets/cirrus/images/sky-horizon-hero.png");
  background-repeat: no-repeat; background-size: cover; background-position: center bottom;
  will-change: transform, opacity;
}
.cloud-layer-base {
  transform: translate3d(var(--cloud-base-x), calc(var(--cloud-base-y) + var(--hero-scroll) * -2px), 0);
}
.cloud-layer-base .cloud-drift {
  background-image: linear-gradient(180deg, rgba(182, 213, 235, 0.44) 0%, rgba(237, 244, 248, 0.24) 45%, #eef4f8 100%), url("assets/cirrus/images/sky-horizon-hero.png");
  background-size: 100% 100%, cover; background-position: center, center bottom;
  animation: cloudBaseDrift 54s linear -17s infinite;
}
.cloud-layer-far {
  transform: translate3d(var(--cloud-far-x), calc(var(--cloud-far-y) + var(--hero-scroll) * -4px), 0);
}
.cloud-layer-far .cloud-drift {
  opacity: .13; background-position: 46% bottom;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.88) 42%, transparent 78%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.88) 42%, transparent 78%);
  animation: cloudFarDrift 84s ease-in-out -47s infinite;
}
.cloud-layer-mid {
  transform: translate3d(var(--cloud-mid-x), calc(var(--cloud-mid-y) + var(--hero-scroll) * -8px), 0);
}
.cloud-layer-mid .cloud-drift {
  opacity: .17; background-position: 52% bottom;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.85) 20%, transparent 39%, transparent 61%, rgba(0,0,0,.85) 80%, #000 100%);
  mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.85) 20%, transparent 39%, transparent 61%, rgba(0,0,0,.85) 80%, #000 100%);
  animation: cloudMidDrift 62s ease-in-out -19s infinite;
}
.cloud-layer-near {
  transform: translate3d(var(--cloud-near-x), calc(var(--cloud-near-y) + var(--hero-scroll) * -14px), 0);
}
.cloud-layer-near .cloud-drift {
  opacity: .15; background-position: 48% bottom;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(0deg, #000 0%, rgba(0,0,0,.86) 30%, transparent 68%);
  mask-image: linear-gradient(0deg, #000 0%, rgba(0,0,0,.86) 30%, transparent 68%);
  animation: cloudNearDrift 46s ease-in-out -31s infinite;
}
@keyframes cloudBaseDrift {
  0%, 100% { transform: translate3d(-4.5%, 0, 0) scale(1.1); }
  38% { transform: translate3d(1.2%, -5px, 0) scale(1.12); }
  73% { transform: translate3d(4.5%, 2px, 0) scale(1.105); }
}
@keyframes cloudFarDrift {
  0%, 100% { opacity: .09; transform: translate3d(-6%, 0, 0) scale(1.06); }
  39% { opacity: .16; transform: translate3d(1.8%, -7px, 0) scale(1.085); }
  74% { opacity: .12; transform: translate3d(6%, 2px, 0) scale(1.07); }
}
@keyframes cloudMidDrift {
  0%, 100% { opacity: .12; transform: translate3d(-8%, 1px, 0) scale(1.06); }
  34% { opacity: .2; transform: translate3d(2.3%, -9px, 0) scale(1.095); }
  71% { opacity: .15; transform: translate3d(8%, 1px, 0) scale(1.075); }
}
@keyframes cloudNearDrift {
  0%, 100% { opacity: .1; transform: translate3d(-10%, 1px, 0) scale(1.07); }
  42% { opacity: .18; transform: translate3d(2.8%, -11px, 0) scale(1.105); }
  77% { opacity: .13; transform: translate3d(10%, 1px, 0) scale(1.08); }
}
.hero-copy { max-width: 840px; margin-inline: auto; text-align: center; }
h1, h2, h3, p { margin-top: 0; }
.hero h1 { margin-bottom: 25px; line-height: 1.04; font-weight: 500; letter-spacing: 0; }
.hero-logo-animation {
  display: block; width: 440px; height: 188px; margin: -20px auto 2px;
}
.hero-wordmark {
  position: relative; display: grid; width: 100%; height: 100%; place-items: center;
  isolation: isolate; transform: translate3d(var(--wordmark-shift-x, 0), var(--wordmark-shift-y, 0), 0);
  transition: transform 0.7s var(--ease); will-change: transform;
}
.wordmark-roman {
  position: absolute; top: 5px; left: 50%; color: rgba(31, 54, 72, 0.66);
  font-family: Inter, Arial, sans-serif; font-size: 10px; font-weight: 650; line-height: 1;
  letter-spacing: 0; transform: translateX(-50%); opacity: 0;
  animation: wordmarkRomanIn 0.9s var(--ease) 0.95s forwards;
}
.wordmark-roman::before, .wordmark-roman::after {
  content: ""; position: absolute; top: 50%; width: 29px; height: 1px; background: rgba(37, 94, 124, 0.28);
}
.wordmark-roman::before { right: calc(100% + 12px); }
.wordmark-roman::after { left: calc(100% + 9px); }
.wordmark-characters {
  display: flex; align-items: center; justify-content: center; gap: 10px; padding-bottom: 5px;
  color: #132f43; font-family: "ZCOOL XiaoWei", "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: 124px; font-weight: 400; line-height: 1; text-rendering: geometricPrecision;
}
.wordmark-character {
  position: relative; display: inline-block; opacity: 0; filter: blur(8px);
  transform: translateY(38px) scale(0.96); transform-origin: center bottom;
  animation: wordmarkCharacterIn 1.15s var(--ease) forwards;
}
.wordmark-character::after {
  content: attr(data-character); position: absolute; z-index: -1; inset: 0; color: transparent;
  -webkit-text-stroke: 1px rgba(41, 121, 149, 0.2); transform: translate(6px, 5px);
  opacity: 0; animation: wordmarkEcho 8s ease-in-out 2.2s infinite;
}
.wordmark-character-fu { animation-delay: 0.12s; }
.wordmark-character-ma { animation-delay: 0.28s; }
.wordmark-character-ma::before {
  content: ""; position: absolute; z-index: 2; right: 7px; top: 13px; width: 7px; height: 7px;
  border-radius: 50%; background: #16a58d; box-shadow: 0 0 0 5px rgba(22, 165, 141, 0.08);
  opacity: 0; transform: scale(0); animation: wordmarkSealIn 0.7s var(--ease) 1.18s forwards;
}
.wordmark-stroke {
  position: absolute; z-index: -1; left: 0; bottom: 7px; width: 100%; height: 32px; overflow: visible;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.wordmark-stroke path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.wordmark-stroke-main {
  stroke: rgba(26, 70, 96, 0.38); stroke-width: 1.35;
  animation: wordmarkStrokeIn 1.15s var(--ease) 0.7s forwards;
}
.wordmark-stroke-accent {
  stroke: #19a68f; stroke-width: 2.1;
  animation: wordmarkStrokeIn 0.55s var(--ease) 1.18s forwards;
}
@keyframes wordmarkCharacterIn {
  0% { opacity: 0; filter: blur(8px); transform: translateY(38px) scale(0.96); }
  62% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}
@keyframes wordmarkRomanIn {
  from { opacity: 0; transform: translate(-50%, 7px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes wordmarkStrokeIn { to { stroke-dashoffset: 0; } }
@keyframes wordmarkSealIn {
  70% { opacity: 1; transform: scale(1.18); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes wordmarkEcho {
  0%, 74%, 100% { opacity: 0; transform: translate(6px, 5px); }
  82% { opacity: 0.48; transform: translate(9px, 7px); }
  91% { opacity: 0; transform: translate(13px, 9px); }
}
.hero-statement {
  position: relative; display: flex; align-items: baseline; justify-content: center;
  color: #596674; font-size: 58px; font-weight: 520; white-space: nowrap;
}
.statement-segment {
  position: relative; display: inline-block; opacity: 0; filter: blur(7px);
  transform: translateY(26px); animation: statementSegmentIn 0.9s var(--ease) var(--segment-delay) forwards;
}
.statement-code { color: #1c506b; font-weight: 650; }
.statement-code-mark {
  position: absolute; left: 5%; right: 5%; bottom: -5px; height: 2px; overflow: hidden;
  background: rgba(25, 166, 143, 0.2); transform: scaleX(0); transform-origin: left;
  animation: statementCodeMarkIn 0.8s var(--ease) 1.82s forwards;
}
.statement-code-mark::after {
  content: ""; position: absolute; inset: 0; background: #19a68f;
  transform: translateX(-102%); animation: statementCodeSignal 8s var(--ease) 2.7s infinite;
}
.statement-cursor {
  width: 3px; height: 0.72em; margin-left: 9px; border-radius: 1px; background: #19a68f;
  opacity: 0; transform: translateY(0.06em) scaleY(0.45); transform-origin: bottom;
  animation: statementCursorIn 0.45s var(--ease) 1.92s forwards, statementCursorBlink 1.1s step-end 2.65s infinite;
}
.serif-accent { font-family: var(--serif); font-style: italic; font-weight: 400; color: #53606e; }
.hero-lead { max-width: 680px; margin: 0 auto; color: #596674; font-size: 17px; line-height: 1.8; }
.lead-line {
  display: block; opacity: 0; clip-path: inset(0 100% 0 0); transform: translateY(10px);
  animation: leadLineIn 1s var(--ease) var(--line-delay) forwards;
}
.lead-token { position: relative; display: inline-block; color: #425c6e; font-weight: 650; }
.lead-token::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 1px;
  background: #19a68f; opacity: 0; transform: scaleX(0); transform-origin: left;
  animation: leadTokenSignal 8s var(--ease) var(--token-delay) infinite;
}
.lead-caret {
  display: inline-block; width: 2px; height: 0.9em; margin-left: 4px; background: #2879ed;
  opacity: 0; transform: translateY(0.12em); animation: leadCaretIn 0.3s ease 2.72s forwards, leadCaretBlink 1.15s step-end 3.1s infinite;
}
.hero-actions {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 34px;
  opacity: 0; transform: translateY(14px); animation: heroActionsIn 0.8s var(--ease) 2.48s forwards;
}
@keyframes statementSegmentIn {
  0% { opacity: 0; filter: blur(7px); transform: translateY(26px); }
  65% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@keyframes statementCodeMarkIn { to { transform: scaleX(1); } }
@keyframes statementCodeSignal {
  0%, 76%, 100% { transform: translateX(-102%); opacity: 0; }
  82% { opacity: 1; }
  93% { transform: translateX(102%); opacity: 1; }
  94% { opacity: 0; }
}
@keyframes statementCursorIn { to { opacity: 1; transform: translateY(0.06em) scaleY(1); } }
@keyframes statementCursorBlink { 0%, 46% { opacity: 0.85; } 47%, 100% { opacity: 0.12; } }
@keyframes leadLineIn { to { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(0); } }
@keyframes leadTokenSignal {
  0%, 84%, 100% { opacity: 0; transform: scaleX(0); transform-origin: left; }
  89% { opacity: 0.8; transform: scaleX(1); transform-origin: left; }
  94% { opacity: 0.35; transform: scaleX(1); transform-origin: right; }
  98% { opacity: 0; transform: scaleX(0); transform-origin: right; }
}
@keyframes leadCaretIn { to { opacity: 0.7; } }
@keyframes leadCaretBlink { 0%, 48% { opacity: 0.65; } 49%, 100% { opacity: 0; } }
@keyframes heroActionsIn { to { opacity: 1; transform: translateY(0); } }
.sky-flow { position: absolute; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; }
.flow-line {
  position: absolute; width: 72vw; height: 400px; border: 1px solid rgba(55, 116, 158, 0.12);
  border-radius: 50%; transform: rotate(-8deg); opacity: 0.7; animation: flowLineBreathe 8s ease-in-out infinite;
}
.flow-line-one { top: 120px; left: -41vw; }
.flow-line-two { top: 80px; right: -53vw; transform: rotate(11deg); animation-delay: -4.5s; }
.flow-signal {
  position: absolute; width: 7px; height: 7px; border: 2px solid rgba(255, 255, 255, 0.75);
  border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 7px rgba(40, 121, 237, 0.08);
  animation: floatSignal 8s ease-in-out infinite;
}
.signal-one { left: 11%; top: 330px; }
.signal-two { right: 12%; top: 460px; background: var(--teal); animation-delay: -2.5s; }
@keyframes floatSignal {
  0%, 100% { transform: translate(0, 0) scale(0.86); opacity: 0.42; }
  46% { transform: translate(26px, -20px) scale(1); opacity: 0.82; }
  68% { transform: translate(36px, -11px) scale(0.92); opacity: 0.52; }
}
@keyframes flowLineBreathe { 50% { opacity: 0.32; } }

/* Code fragments share one slow rhythm so they read as a living system, not random decoration. */
.code-sky {
  position: absolute; inset: 0; z-index: 1; overflow: hidden;
  transform: translate3d(var(--code-shift-x, 0), var(--code-shift-y, 0), 0);
  transition: transform 0.8s var(--ease); will-change: transform;
}
.sky-code {
  --duration: 24s; --delay: 0s; --drift-x: 28px; --drift-y: -34px;
  position: absolute; width: 180px; height: 38px; color: rgba(31, 92, 132, 0.68);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 16px;
  font-weight: 520; line-height: 38px; text-align: left; opacity: 0; filter: blur(6px);
  text-shadow: 0 12px 28px rgba(30, 95, 145, 0.13);
  animation: skyCodeFloat var(--duration) var(--ease) var(--delay) infinite;
}
.sky-code::before {
  content: attr(data-node); position: absolute; right: calc(100% + 9px); top: 2px;
  color: rgba(74, 111, 137, 0.46); font-size: 8px; font-weight: 700; line-height: 1;
}
.sky-code::after {
  content: ""; position: absolute; right: calc(100% + 12px); top: 18px; width: 4px; height: 4px;
  border-radius: 50%; background: currentColor; opacity: 0.42; box-shadow: 0 0 0 4px rgba(39, 121, 165, 0.06);
  animation: skyNodePulse var(--duration) ease-in-out var(--delay) infinite;
}
.glyph { position: absolute; inset: 0; display: grid; align-items: center; white-space: nowrap; }
.sky-code .glyph-start { animation: skyGlyphStart var(--duration) var(--ease) var(--delay) infinite; }
.sky-code .glyph-change { opacity: 0; animation: skyGlyphChange var(--duration) var(--ease) var(--delay) infinite; }
.sky-code-one { left: 0; top: 315px; --duration: 24s; --delay: -1s; --drift-x: 20px; --drift-y: -34px; }
.sky-code-two { left: 1%; top: 595px; width: 185px; color: rgba(12, 126, 111, 0.5); --duration: 26s; --delay: -7s; --drift-x: -20px; --drift-y: -38px; }
.sky-code-three { right: 2%; top: 325px; width: 150px; color: rgba(65, 81, 98, 0.52); --duration: 28s; --delay: -4s; --drift-x: -30px; --drift-y: -32px; }
.sky-code-four { right: 10%; top: 590px; width: 150px; color: rgba(148, 93, 65, 0.38); --duration: 24s; --delay: -13s; --drift-x: 24px; --drift-y: -40px; }
.sky-code-five { left: 3%; top: 800px; width: 170px; font-size: 14px; color: rgba(37, 101, 148, 0.43); --duration: 26s; --delay: -20s; --drift-x: 30px; --drift-y: -30px; }
.sky-code-six { right: 3%; top: 805px; width: 180px; font-size: 14px; color: rgba(17, 126, 114, 0.42); --duration: 28s; --delay: -18s; --drift-x: -28px; --drift-y: -36px; }
@keyframes skyCodeFloat {
  0%, 8%, 50%, 100% { opacity: 0; filter: blur(5px); transform: translate3d(0, 20px, 0) scale(0.97); }
  16% { opacity: 0.22; filter: blur(1.5px); }
  30% { opacity: 0.56; filter: blur(0); transform: translate3d(var(--drift-x), var(--drift-y), 0) scale(1); }
  42% { opacity: 0.18; filter: blur(1px); transform: translate3d(var(--drift-x), var(--drift-y), 0) scale(0.99); }
}
@keyframes skyGlyphStart {
  0%, 24% { opacity: 1; transform: translateY(0); }
  31%, 100% { opacity: 0; transform: translateY(-2px); }
}
@keyframes skyGlyphChange {
  0%, 24% { opacity: 0; transform: translateY(2px); }
  31%, 42% { opacity: 1; transform: translateY(0); }
  49%, 100% { opacity: 0; transform: translateY(-2px); }
}
@keyframes skyNodePulse {
  0%, 14%, 46%, 100% { opacity: .18; transform: scale(.82); }
  28% { opacity: .55; transform: scale(1.18); }
  36% { opacity: .34; transform: scale(1); }
}

.scene-cycle { position: relative; z-index: 3; width: min(520px, 82vw); margin: 72px auto 0; }
.scene-track { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; }
.scene-line {
  position: absolute; left: 16.666%; right: 16.666%; top: 7px; height: 1px;
  background: rgba(78, 115, 139, 0.25);
}
.scene-orb {
  position: absolute; z-index: 4; left: calc(var(--scene-position) - 7px); top: 0; width: 15px; height: 15px;
  border: 3px solid rgba(255, 255, 255, 0.95); border-radius: 50%; background: var(--blue);
  box-shadow: 0 0 0 7px rgba(40, 121, 237, 0.1), 0 8px 22px rgba(24, 94, 148, 0.2);
  transition: left 0.72s var(--ease), background 0.35s ease, box-shadow 0.35s ease;
}
.scene-track[data-active-scene="1"] .scene-orb { background: var(--teal); box-shadow: 0 0 0 7px rgba(25, 185, 158, 0.1), 0 8px 22px rgba(15, 112, 96, 0.18); }
.scene-track[data-active-scene="2"] .scene-orb { background: var(--orange); box-shadow: 0 0 0 7px rgba(255, 120, 72, 0.1), 0 8px 22px rgba(164, 71, 36, 0.18); }
.scene-node {
  position: relative; z-index: 3; display: grid; justify-items: center; gap: 16px; padding: 0 8px;
  border: 0; color: var(--muted-light); background: transparent; font: inherit; font-size: 11px;
  cursor: pointer; transition: color 0.3s ease;
}
.scene-dot {
  width: 15px; height: 15px; border: 2px solid rgba(107, 137, 157, 0.5); border-radius: 50%;
  background: #edf4f7; transition: opacity 0.3s ease;
}
.scene-node.is-active { color: var(--ink); font-weight: 700; }
.scene-node.is-active .scene-dot { opacity: 0; }
.scene-node:focus-visible { outline: 2px solid rgba(40, 121, 237, 0.55); outline-offset: 7px; border-radius: 2px; }

.section { padding-block: var(--section-space); }
.section-index { margin-bottom: 24px; color: var(--muted-light); font-size: 11px; font-weight: 700; letter-spacing: 0; }
.contact-heading h2 { margin-bottom: 0; font-size: 60px; line-height: 1.14; letter-spacing: 0; }
#contact-title .serif-accent { display: inline-block; margin-right: 0.12em; }

.post-hero-surface {
  display: flow-root; background: var(--page-wash);
}

.identity-band {
  position: relative; z-index: 4; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: calc(var(--identity-overlap) * -1); padding: 8px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); box-shadow: 0 1px 1px rgba(14,17,22,.04), 0 20px 42px -24px rgba(14,17,22,.2);
}
.identity-item {
  min-height: 76px; display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 14px;
  padding: 12px 28px; border-right: 1px solid var(--line);
}
.identity-item:last-child { border-right: 0; }
.identity-number { color: var(--muted-light); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; }
.identity-item strong { display: block; font-size: 18px; font-weight: 650; }
.identity-item small { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; }

.content-section {
  position: relative; margin-top: calc(var(--identity-overlap) * -1);
  padding-top: calc(var(--section-space) + var(--identity-overlap));
  padding-bottom: var(--section-space);
  overflow: hidden; background: transparent;
}
.content-section .shell { position: relative; z-index: 1; }
.editorial-heading {
  display: grid; grid-template-columns: minmax(130px, 0.55fr) minmax(430px, 1.25fr) minmax(250px, 0.8fr);
  gap: 56px; align-items: start; margin-bottom: 72px;
}
.editorial-heading .section-index { margin: 8px 0 0; }
.editorial-heading h2 {
  margin: 0; font-size: 54px; font-weight: 650; line-height: 1.18; letter-spacing: 0;
}
.editorial-heading > p:last-child { max-width: 420px; margin: 8px 0 0; color: var(--muted); line-height: 1.85; }
.section-link { display: inline-flex; align-items: center; gap: 4px; color: var(--ink); font-weight: 650; border-bottom: 1px solid rgba(16,19,23,.28); }
.section-link:hover { color: #1768b3; border-color: currentColor; }
.section-link svg { width: 13px; height: 13px; }
.topic-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.topic-row {
  min-height: 342px; display: flex; flex-direction: column; align-items: flex-start; padding: 30px;
  border: 1px solid rgba(216, 226, 234, 0.96); border-radius: 28px; background: var(--panel);
  box-shadow: 0 1px 1px rgba(14,17,22,.04), 0 20px 40px -24px rgba(14,17,22,.18);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s ease;
}
.topic-row:hover { transform: translateY(-6px); border-color: #ccdbe6; box-shadow: 0 2px 3px rgba(14,17,22,.04), 0 28px 52px -25px rgba(14,17,22,.24); }
.topic-code { display: flex; align-items: center; gap: 12px; color: #397492; font-size: 11px; font-weight: 700; }
.topic-code-copy { display: grid; gap: 2px; }
.topic-code-copy small { color: var(--muted); font-size: 11px; font-weight: 500; }
.topic-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 16px; color: var(--white); background: var(--ink); }
.topic-icon svg { width: 20px; height: 20px; }
.topic-row h3 { margin: 32px 0 12px; font-size: 25px; font-weight: 650; }
.topic-row p { max-width: 520px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.75; }
.topic-signal { width: 100%; height: 54px; display: flex; align-items: flex-end; gap: 7px; margin-top: auto; padding-top: 22px; border-top: 1px solid var(--line); }
.topic-signal i { flex: 1; height: 35%; border-radius: 8px; background: var(--blue); transition: height 0.45s var(--ease); }
.topic-signal i:nth-child(2) { height: 72%; }
.topic-signal i:nth-child(3) { height: 52%; }
.topic-row:hover .topic-signal i:first-child { height: 58%; }
.topic-row:hover .topic-signal i:nth-child(3) { height: 82%; }
.topic-signal-orange i { background: var(--orange); }
.topic-signal-green i { background: var(--teal); }

.toolbox-section { background: var(--page-wash); }
.toolbox-section .section-index { color: #397492; }
.toolbox-stage { padding: 10px; border: 1px solid #e0e7ed; border-radius: 28px; background: var(--panel); box-shadow: 0 1px 1px rgba(14,17,22,.04), 0 24px 54px -28px rgba(14,17,22,.22); }
.tool-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 6px; border-radius: 999px; background: var(--surface-soft); }
.tool-item {
  min-width: 0; min-height: 54px; display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 0 16px; border: 0; border-radius: 999px; color: var(--muted); background: transparent;
  cursor: pointer; transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.tool-item:hover { color: var(--ink); background: var(--white); }
.tool-item.is-active { color: var(--white); background: var(--ink); box-shadow: 0 14px 30px -18px rgba(14,17,22,.65); }
.tool-item > svg { flex: 0 0 auto; width: 17px; height: 17px; stroke-width: 1.75; }
.tool-item strong { min-width: 0; overflow: hidden; font-size: 13px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.tool-feedback {
  min-height: 260px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); align-items: center; gap: 70px;
  padding: 46px 52px 42px;
}
.tool-feedback-copy > span { color: var(--muted-light); font-size: 11px; font-weight: 650; }
.tool-feedback-copy > strong { display: block; margin: 12px 0 10px; font-size: 32px; line-height: 1.2; }
.tool-feedback p { max-width: 590px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.8; transition: opacity 0.18s ease, transform 0.18s ease; }
.tool-feedback.is-changing .tool-feedback-copy { opacity: .35; transform: translateY(5px); }
.tool-feedback-copy { transition: opacity .18s ease, transform .18s ease; }
.tool-signal { min-height: 164px; padding: 20px 22px; border: 1px solid #e7edf2; border-radius: 20px; background: var(--surface-soft); }
.tool-signal-label { display: flex; align-items: baseline; justify-content: space-between; color: var(--muted); font-size: 11px; }
.tool-signal-label strong { color: var(--ink); font-size: 16px; }
.tool-signal-bars { height: 76px; display: flex; align-items: flex-end; gap: 8px; margin: 14px 0 16px; }
.tool-signal-bars i { flex: 1; height: var(--signal-height); border-radius: 8px; background: var(--blue); transition: height .45s var(--ease); }
.tool-signal-bars i:nth-child(3n + 2) { background: var(--orange); }
.tool-signal-bars i:nth-child(3n) { background: var(--teal); }
.tool-signal-track { height: 6px; overflow: hidden; border-radius: 999px; background: #e3e9ee; }
.tool-signal-track span { display: block; height: 100%; border-radius: inherit; background: var(--blue); transition: width .45s var(--ease); }

.lab-section { background: var(--page-wash); }
.lab-list { position: relative; }
.lab-list::before { content: ""; position: absolute; left: 22px; top: 42px; bottom: 42px; width: 1px; background: #d7e1e8; }
.lab-row {
  position: relative; min-height: 180px; display: grid; grid-template-columns: .72fr 1.65fr .38fr;
  gap: 46px; align-items: start; padding: 34px 0 34px 76px; border-bottom: 1px solid var(--line);
  transition: background-color .25s ease, transform .35s var(--ease);
}
.lab-row:first-child { border-top: 1px solid var(--line); }
.lab-row::before {
  content: ""; position: absolute; z-index: 1; left: 15px; top: 38px; width: 15px; height: 15px;
  border: 3px solid var(--white); border-radius: 50%; background: var(--blue);
  box-shadow: 0 0 0 1px rgba(40,121,237,.25), 0 0 0 7px rgba(40,121,237,.07);
  transition: transform .35s var(--ease), box-shadow .35s ease;
}
.lab-row:nth-child(2)::before { background: var(--orange); box-shadow: 0 0 0 1px rgba(255,120,72,.25), 0 0 0 7px rgba(255,120,72,.07); }
.lab-row:nth-child(3)::before { background: var(--teal); box-shadow: 0 0 0 1px rgba(25,185,158,.25), 0 0 0 7px rgba(25,185,158,.07); }
.lab-row:nth-child(4)::before { background: var(--blue); }
.lab-row:hover { transform: translateX(8px); background: #f7f9fa; }
.lab-row:hover::before { transform: scale(1.2); }
.lab-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--muted); font-size: 10px; }
.lab-status { padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px; font-size: 9px; }
.status-done { color: #167863; border-color: rgba(22,120,99,.22); background: rgba(25,185,158,.07); }
.status-building { color: #2d6fa7; border-color: rgba(45,111,167,.2); background: rgba(40,121,237,.06); }
.lab-title h3 { margin: 0 0 10px; font-size: 27px; font-weight: 650; }
.lab-title h3 a { display: inline-flex; align-items: center; gap: 9px; }
.lab-title h3 a:hover { color: #1768b3; }
.lab-title h3 svg { width: 18px; height: 18px; }
.lab-title p { max-width: 650px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.75; }
.lab-type { justify-self: end; color: var(--muted-light); font-size: 9px; text-align: right; }

.brand-manifesto {
  min-height: 490px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 48px; padding: 92px 32px; background: var(--page-wash); text-align: center;
}
.follow-heading { display: flex; align-items: center; gap: 20px; text-align: left; }
.manifesto-mark { width: 72px; height: 72px; display: grid; place-items: center; }
.manifesto-mark img { width: 72px; }
.follow-heading p { margin: 0 0 4px; color: var(--muted); font-size: 12px; }
.follow-heading h2 { margin: 0; font-size: 48px; line-height: 1.15; }
.follow-dock {
  width: min(940px, calc(100% - 32px)); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel);
  box-shadow: 0 1px 1px rgba(14,17,22,.04), 0 22px 46px -26px rgba(14,17,22,.22);
}
.follow-item {
  min-width: 0; min-height: 78px; display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center;
  gap: 12px; padding: 10px 24px; border: 0; border-right: 1px solid var(--line); color: var(--ink);
  background: transparent; font: inherit; text-align: left;
}
.follow-item:last-child { border-right: 0; }
.follow-item > svg:first-child { width: 19px; height: 19px; justify-self: center; color: var(--muted); }
.follow-item > span { min-width: 0; display: grid; }
.follow-item small { color: var(--muted-light); font-size: 10px; }
.follow-item strong { overflow: hidden; font-size: 14px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.follow-action { grid-template-columns: 38px minmax(0, 1fr) 22px; border-radius: 999px; cursor: pointer; transition: color .25s ease, background-color .25s ease; }
.follow-action > svg:last-child { width: 16px; height: 16px; color: var(--muted-light); }
.follow-action:hover { color: var(--white); background: var(--ink); }
.follow-action:hover small, .follow-action:hover > svg:first-child, .follow-action:hover > svg:last-child { color: rgba(255,255,255,.7); }
.follow-action:focus-visible { outline: 3px solid rgba(40,121,237,.28); outline-offset: 2px; }

.contact { background: var(--page-wash); }
.contact-shell { display: grid; grid-template-columns: 0.86fr 1.14fr; gap: 100px; align-items: start; }
.contact-heading { padding-top: 10px; }
.contact-heading > p:not(.section-index) { max-width: 450px; margin: 26px 0; color: var(--muted); line-height: 1.8; }
.service-lines { margin: 44px 0 26px; border-top: 1px solid var(--line); }
.service-lines span { min-height: 52px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.service-lines svg { width: 15px; color: #327d6c; }
.contact-note { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12px; }
.contact-note svg { width: 16px; }
.contact-form { padding: 38px; border: 1px solid var(--line); border-radius: 28px; background: var(--panel); box-shadow: var(--shadow); }
.contact-form fieldset { margin: 0 0 28px; padding: 0; border: 0; }
.contact-form legend, .form-field > span { display: block; margin-bottom: 10px; font-size: 12px; font-weight: 700; }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.choice-grid label { position: relative; cursor: pointer; }
.choice-grid input { position: absolute; opacity: 0; pointer-events: none; }
.choice-grid span { min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 13px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 12px; transition: 0.2s ease; }
.choice-grid svg { width: 15px; }
.choice-grid input:checked + span { color: var(--white); border-color: var(--ink); background: var(--ink); }
.choice-grid input:focus-visible + span { outline: 3px solid rgba(40, 121, 237, 0.28); outline-offset: 2px; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.form-field { display: block; margin-bottom: 18px; }
.form-field input, .form-field textarea { width: 100%; border: 1px solid var(--line); color: var(--ink); background: var(--surface-soft); transition: 0.2s ease; }
.form-field input { height: 48px; padding: 0 15px; border-radius: 999px; }
.form-field textarea { min-height: 130px; padding: 13px 15px; border-radius: 8px; resize: vertical; }
.form-field input:focus, .form-field textarea:focus { outline: none; border-color: var(--blue); background: var(--white); box-shadow: 0 0 0 3px rgba(40, 121, 237, 0.1); }
.form-field.has-error input, .form-field.has-error textarea { border-color: var(--orange); }
.field-error { display: block; min-height: 16px; padding: 4px 5px 0; color: #d34e28; font-size: 10px; }
.button-submit { width: 100%; }
.button-submit:disabled { opacity: .68; cursor: wait; }
.form-honeypot { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.form-hint { margin: 12px 0 0; color: var(--muted-light); font-size: 10px; text-align: center; }

.site-footer { color: var(--ink); background: var(--page-wash); border-top: 1px solid rgba(198, 215, 226, .72); }
.footer-main { min-height: 220px; display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 50px; }
.footer-brand { display: flex; align-items: center; gap: 14px; }
.footer-logo { width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid rgba(198, 215, 226, 0.9); border-radius: 50%; background: rgba(255, 255, 255, 0.62); }
.footer-logo img { width: 42px; }
.footer-brand div { display: flex; flex-direction: column; }
.footer-brand strong { font-size: 18px; }.footer-brand span { color: var(--muted-light); font-size: 11px; }
.footer-main > p { max-width: 350px; margin: 0; color: var(--muted); font-family: var(--serif); font-size: 17px; }
.back-top { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(198, 215, 226, 0.9); border-radius: 50%; background: rgba(255, 255, 255, 0.45); }
.back-top:hover { color: var(--white); background: var(--blue); }
.back-top svg { width: 18px; }
.footer-bottom { min-height: 62px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(198, 215, 226, 0.9); color: #7b8792; font-size: 9px; letter-spacing: 0; }
.toast { position: fixed; z-index: 100; left: 50%; bottom: 28px; padding: 11px 18px; border-radius: 999px; color: var(--white); background: var(--ink); box-shadow: 0 14px 40px rgba(0,0,0,.25); font-size: 12px; opacity: 0; transform: translate(-50%, 20px); pointer-events: none; transition: 0.3s var(--ease); }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.75s var(--ease), transform 0.75s var(--ease); transition-delay: var(--delay, 0ms); }
.reveal.is-visible { opacity: 1; transform: none; }

/* Motion layer: quiet, responsive signals that preserve Cirrus restraint. */
.nav-wrap {
  position: relative; border-color: transparent; background: transparent; box-shadow: none;
}
.site-header.is-sticky .nav-wrap {
  border-color: transparent; background: transparent; box-shadow: none; backdrop-filter: none;
}
.brand {
  padding: 5px 14px 5px 5px; border: 1px solid rgba(217,228,236,.9); border-radius: 999px;
  background: rgba(255,255,255,.88); box-shadow: 0 1px 1px rgba(14,17,22,.04), 0 18px 34px -25px rgba(14,17,22,.2);
  transition: transform .25s var(--ease), background-color .25s ease, box-shadow .25s ease;
}
.brand:hover { transform: translateY(-2px); background: var(--white); }
.brand-mark { border-color: transparent; background: transparent; }
.desktop-nav {
  position: absolute; left: 50%; gap: 3px; margin-left: 0; padding: 5px;
  border: 1px solid rgba(217,228,236,.9); border-radius: 999px; background: rgba(255,255,255,.88);
  box-shadow: 0 1px 1px rgba(14,17,22,.04), 0 18px 34px -25px rgba(14,17,22,.2);
  transform: translateX(-50%);
}
.desktop-nav a { padding: 7px 14px; border-radius: 999px; transition: color .2s ease, background-color .25s ease; }
.desktop-nav a::after { display: none; }
.desktop-nav a:hover { background: rgba(243,246,250,.72); }
.desktop-nav a.is-active { background: var(--surface-soft); box-shadow: none; }
.site-header.is-sticky .brand, .site-header.is-sticky .desktop-nav {
  background: rgba(255,255,255,.96); box-shadow: 0 1px 1px rgba(14,17,22,.04), 0 20px 38px -24px rgba(14,17,22,.24);
}

.hero-inner {
  opacity: clamp(.84, calc(1 - var(--hero-scroll) * .16), 1);
  transform: translate3d(0, calc(var(--hero-scroll) * -20px), 0);
  transform-origin: center top; will-change: transform, opacity;
}

.button svg, .back-top svg, .follow-action > svg:last-child { transition: transform .3s var(--ease); }
.button:hover svg { transform: translate3d(2px, -1px, 0); }
.button[href="#content"]:hover svg { transform: translate3d(0, 3px, 0); }
.back-top:hover svg { transform: translateY(-3px); }
.follow-action:hover > svg:last-child { transform: translate3d(2px, -2px, 0); }

.topic-row {
  --tilt-x: 0deg; --tilt-y: 0deg; transform-style: preserve-3d; will-change: transform;
}
.topic-row:hover {
  transform: perspective(1000px) translateY(-7px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
}
.topic-row .topic-icon, .topic-row h3 { transform: translateZ(16px); transition: transform .35s var(--ease); }
.topic-row:hover .topic-icon { transform: translate3d(0, -2px, 20px); }
.topic-row:not(.is-visible) .topic-signal i { transform: scaleY(0); }
.topic-row.is-visible .topic-signal i { animation: signalRise .72s var(--ease) both; }
.topic-row.is-visible .topic-signal i:nth-child(2) { animation-delay: 90ms; }
.topic-row.is-visible .topic-signal i:nth-child(3) { animation-delay: 180ms; }
@keyframes signalRise { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.lab-list { --timeline-progress: 0; }
.lab-list::after {
  content: ""; position: absolute; z-index: 0; left: 22px; top: 42px; width: 1px;
  height: calc(100% - 84px); background: rgba(14,17,22,.48);
  transform: scaleY(var(--timeline-progress)); transform-origin: center top; will-change: transform;
}
.lab-row.is-current { background: #f7f9fa; }
.lab-row.is-current::before { transform: scale(1.16); }
.lab-row.is-current .lab-title h3 { transform: translateX(4px); }
.lab-title h3 { transition: transform .35s var(--ease), color .25s ease; }

.manifesto-mark {
  position: relative; width: 168px; height: 94px; flex: 0 0 auto; padding: 0;
  border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.9);
  box-shadow: 0 1px 1px rgba(14,17,22,.04), 0 20px 40px -26px rgba(14,17,22,.2);
  cursor: pointer; overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s ease;
}
.manifesto-mark:hover { transform: translateY(-4px); box-shadow: 0 2px 3px rgba(14,17,22,.04), 0 28px 48px -26px rgba(14,17,22,.24); }
.manifesto-wordmark {
  position: absolute; inset: 0; display: grid; place-items: center; isolation: isolate;
  color: #132f43;
}
.manifesto-wordmark-roman {
  position: absolute; top: 8px; left: 50%; color: rgba(31,54,72,.58);
  font-family: Inter, Arial, sans-serif; font-size: 7px; font-weight: 700; line-height: 1;
  letter-spacing: 0; transform: translateX(-50%);
}
.manifesto-wordmark-roman::before, .manifesto-wordmark-roman::after {
  content: ""; position: absolute; top: 50%; width: 18px; height: 1px; background: rgba(37,94,124,.24);
}
.manifesto-wordmark-roman::before { right: calc(100% + 6px); }
.manifesto-wordmark-roman::after { left: calc(100% + 6px); }
.manifesto-characters {
  position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 0;
  padding-top: 7px; font-family: "ZCOOL XiaoWei", "STKaiti", "KaiTi", "Songti SC", serif;
  font-size: 58px; font-weight: 400; line-height: 1; letter-spacing: 0;
}
.manifesto-character { position: relative; display: inline-block; }
.manifesto-character::after {
  content: attr(data-character); position: absolute; z-index: -1; inset: 0; color: transparent;
  -webkit-text-stroke: .8px rgba(41,121,149,.3); opacity: 0; transform: translate(3px, 2px);
}
.manifesto-character-ma::before {
  content: ""; position: absolute; z-index: 3; right: 1px; top: 3px; width: 4px; height: 4px;
  border-radius: 50%; background: #19a68f; box-shadow: 0 0 0 4px rgba(25,166,143,.08);
}
.manifesto-stroke {
  position: absolute; z-index: 1; left: 8px; right: 8px; bottom: 7px; width: calc(100% - 16px); height: 18px;
  overflow: visible; fill: none; stroke: rgba(26,70,96,.48); stroke-width: 1.3;
  stroke-linecap: round; stroke-linejoin: round;
}
.manifesto-stroke path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.manifesto-mark.is-playing .manifesto-wordmark-roman { animation: manifestoRomanIn .65s var(--ease) .18s both; }
.manifesto-mark.is-playing .manifesto-character { animation: manifestoCharacterIn .9s var(--ease) both; }
.manifesto-mark.is-playing .manifesto-character-fu { animation-delay: .08s; }
.manifesto-mark.is-playing .manifesto-character-ma { animation-delay: .26s; }
.manifesto-mark.is-playing .manifesto-character::after { animation: manifestoEcho .9s var(--ease) .92s both; }
.manifesto-mark.is-playing .manifesto-character-ma::before { animation: manifestoSealIn .55s var(--ease) .92s both; }
.manifesto-mark.is-playing .manifesto-stroke path { animation: manifestoStrokeIn .9s var(--ease) .58s both; }
@keyframes manifestoCharacterIn {
  0% { opacity: 0; filter: blur(6px); transform: translateY(18px) scale(.95); }
  65% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}
@keyframes manifestoRomanIn {
  from { opacity: 0; transform: translate(-50%, 5px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes manifestoEcho {
  0%, 45% { opacity: 0; transform: translate(3px, 2px); }
  70% { opacity: .48; transform: translate(5px, 3px); }
  100% { opacity: 0; transform: translate(8px, 5px); }
}
@keyframes manifestoSealIn {
  0% { opacity: 0; transform: scale(0); }
  72% { opacity: 1; transform: scale(1.22); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes manifestoStrokeIn {
  from { stroke-dashoffset: 1; opacity: .2; }
  to { stroke-dashoffset: 0; opacity: 1; }
}

@media (max-width: 1020px) {
  :root { --shell: min(100% - 40px, 940px); --section-space: 96px; }
  .hero-logo-animation { width: 400px; height: 174px; }
  .wordmark-characters { font-size: 112px; }
  .hero-statement { font-size: 52px; }
  .contact-heading h2 { font-size: 52px; }
  .contact-shell { gap: 60px; }
  .editorial-heading { grid-template-columns: 0.45fr 1.2fr 0.8fr; gap: 36px; }
  .editorial-heading h2 { font-size: 48px; }
  .identity-item { padding-inline: 24px; }
}

@media (max-width: 820px) {
  :root { --shell: min(100% - 32px, 720px); }
  .desktop-nav, .header-cta { display: none; }
  .menu-toggle { display: grid; }
  .nav-wrap { min-height: 58px; padding-left: 8px; }
  .brand-mark { width: 38px; height: 38px; }.brand-mark img { width: 28px; }
  .mobile-menu {
    position: absolute; top: 82px; left: 50%; display: grid; gap: 4px; padding: 12px;
    border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.96);
    box-shadow: var(--shadow); transform: translateX(-50%); backdrop-filter: blur(14px);
  }
  .mobile-menu[hidden] { display: none; }
  .mobile-menu a { padding: 11px 13px; border-radius: 10px; font-size: 14px; }
  .mobile-menu a:hover { background: var(--surface-soft); }
  .sky-stage { min-height: auto; padding-bottom: 120px; }
  .cloud-layer { inset: -8% -16% -8%; }
  .cloud-layer-far { opacity: .65; }
  .cloud-layer-mid { opacity: .55; }
  .cloud-layer-near { opacity: .6; }
  .cloud-layer-far .cloud-drift { background-position: 48% bottom; }
  .cloud-layer-mid .cloud-drift { background-position: 50% bottom; }
  .cloud-layer-near .cloud-drift { background-position: 51% bottom; }
  .code-sky { display: block; opacity: 0.45; }
  .sky-code { display: none; }
  .sky-code-one, .sky-code-three { display: block; width: 125px; font-size: 11px; }
  .sky-code-one { left: -18px; top: 700px; }
  .sky-code-three { right: -145px; top: 410px; }
  .hero-inner { padding-top: 135px; }
  .hero-logo-animation { width: 360px; height: 158px; }
  .wordmark-characters { font-size: 100px; }
  .hero-statement { font-size: 46px; }
  .scene-cycle { margin-top: 60px; }
  .contact-shell { grid-template-columns: 1fr; gap: 55px; }
  .identity-band { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .identity-item { min-height: 70px; padding-inline: 18px; }
  .editorial-heading { grid-template-columns: 1fr; gap: 22px; margin-bottom: 54px; }
  .editorial-heading .section-index, .editorial-heading > p:last-child { margin-top: 0; }
  .editorial-heading > p:last-child { max-width: 590px; }
  .topic-list { grid-template-columns: 1fr; }
  .topic-row { min-height: 290px; }
  .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 24px; }
  .tool-feedback { grid-template-columns: 1fr; gap: 34px; padding: 40px 34px; }
  .tool-signal { min-height: 150px; }
  .lab-row { grid-template-columns: .62fr 1.38fr .34fr; gap: 26px; }
  .follow-dock { width: min(100% - 32px, 720px); }
  .follow-item { padding-inline: 16px; }
  .footer-main { grid-template-columns: 1fr auto; padding: 55px 0; }
  .footer-main > p { grid-row: 2; }
}

@media (max-width: 560px) {
  :root { --shell: calc(100% - 28px); --section-space: 78px; --identity-overlap: 40px; }
  .site-header { padding-top: 10px; }
  .brand-copy small { display: none; }
  .hero-inner { padding-top: 119px; }
  .code-sky { display: block; }
  .hero h1 { line-height: 1.1; }
  .hero-logo-animation { width: min(100%, 310px); height: 136px; margin: -13px auto 2px; }
  .wordmark-characters { gap: 4px; font-size: 82px; }
  .wordmark-roman { top: 3px; font-size: 8px; }
  .wordmark-roman::before, .wordmark-roman::after { width: 20px; }
  .wordmark-character-ma::before { right: 5px; top: 9px; width: 5px; height: 5px; }
  .hero-statement { font-size: 36px; }
  .statement-cursor { width: 2px; margin-left: 6px; }
  .hero-lead { font-size: 14px; line-height: 1.75; }
  .hero-actions { display: grid; }
  .scene-cycle { width: min(100%, 360px); margin-top: 52px; }
  .contact-heading h2 { font-size: 39px; }
  .editorial-heading h2 { font-size: 38px; line-height: 1.25; }
  .section-index { margin-bottom: 18px; }
  .contact-form { border-radius: 24px; }
  .identity-band { width: calc(100% - 20px); padding: 6px; }
  .identity-item { min-width: 0; grid-template-columns: 1fr; justify-items: center; gap: 0; padding: 10px 6px; text-align: center; }
  .identity-number { display: none; }
  .identity-item strong { font-size: 14px; }
  .identity-item small { font-size: 9px; }
  .topic-row { min-height: 310px; padding: 26px 24px; }
  .topic-row h3 { font-size: 22px; }
  .toolbox-stage { padding: 7px; border-radius: 24px; }
  .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 20px; }
  .tool-item { min-height: 48px; }
  .tool-feedback { min-height: 0; gap: 28px; padding: 34px 22px 26px; }
  .tool-feedback-copy > strong { font-size: 27px; }
  .tool-signal { min-height: 142px; padding: 17px; }
  .tool-signal-bars { height: 66px; }
  .lab-list::before { left: 16px; }
  .lab-list::after { left: 16px; }
  .lab-row { min-height: 0; grid-template-columns: 1fr auto; gap: 16px; padding: 28px 0 28px 54px; }
  .lab-row::before { left: 9px; top: 32px; }
  .lab-row:hover { transform: none; }
  .lab-meta { grid-column: 1; }
  .lab-title { grid-column: 1 / -1; grid-row: 2; }
  .lab-title h3 { font-size: 23px; }
  .lab-type { grid-column: 2; grid-row: 1; align-self: center; }
  .brand-manifesto { min-height: 0; gap: 34px; padding: 78px 18px; }
  .follow-heading { gap: 14px; }
  .manifesto-mark { width: 128px; height: 72px; }
  .manifesto-wordmark-roman { top: 6px; font-size: 6px; }
  .manifesto-wordmark-roman::before, .manifesto-wordmark-roman::after { width: 12px; }
  .manifesto-characters { padding-top: 5px; font-size: 43px; }
  .manifesto-stroke { left: 7px; right: 7px; bottom: 5px; width: calc(100% - 14px); height: 14px; }
  .follow-heading h2 { font-size: 34px; }
  .follow-dock { width: 100%; grid-template-columns: 1fr; padding: 7px; border-radius: 28px; }
  .follow-item { min-height: 66px; padding: 8px 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  .follow-item:last-child { border-bottom: 0; }
  .service-lines { margin-top: 34px; }
  .contact-form { padding: 26px 20px; }
  .choice-grid, .form-row { grid-template-columns: 1fr; }
  .footer-main { grid-template-columns: 1fr auto; gap: 26px; }
  .footer-main > p { grid-column: 1 / -1; }
  .footer-bottom { align-items: flex-start; flex-direction: column; justify-content: center; gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .sky-code { display: none; }
  .cloudscape { display: none; }
  body::before { animation: none; transform: scale(1.08); }
  .wordmark-character, .wordmark-roman { opacity: 1; filter: none; transform: none; }
  .wordmark-character-ma::before { opacity: 1; transform: none; }
  .wordmark-stroke path { stroke-dashoffset: 0; }
  .statement-segment, .lead-line, .hero-actions { opacity: 1; filter: none; clip-path: none; transform: none; }
  .statement-code-mark { transform: scaleX(1); }
  .statement-cursor, .lead-caret, .lead-token::after { display: none; }
  .hero-wordmark, .code-sky { transform: none; transition: none; }
  .hero-inner { opacity: 1; transform: none; }
  .topic-row:hover { transform: none; }
  .topic-row:not(.is-visible) .topic-signal i { transform: none; }
  .topic-row.is-visible .topic-signal i { animation: none; }
}

.sky-stage.motion-paused .cloud-drift,
.sky-stage.motion-paused .sky-code,
.sky-stage.motion-paused .sky-code::after,
.sky-stage.motion-paused .sky-code .glyph { animation-play-state: paused; }