/* Logo and Chinese typography corrections. */
.brand { gap: 0; }
.brand img { display: block; width: 104px; height: auto; }
header[data-theme="light"] .brand img,
header[data-theme="dark"] .brand img { filter: none; }

h1, h2, h3 { letter-spacing: -0.035em; }
.path-title { width: 46%; max-width: 540px; }
.arch-copy { width: 48%; max-width: 590px; }
.path-title h2 {
  max-inline-size: 9em;
  font-size: clamp(44px, 3.7vw, 64px);
  text-wrap: balance;
  white-space: normal;
}
.arch-copy h2 {
  max-inline-size: 9.3em;
  font-size: clamp(44px, 3.55vw, 62px);
  text-wrap: balance;
  white-space: normal;
}
.industry-copy h2 { max-inline-size: 540px; text-wrap: balance; }

.meta { font-size: 11px; }
.kicker { font-size: 11px; }
.steps small, .layers span, .industry-core i { font-size: 11px; }
.steps p, .days span { font-size: 13px; }
.problems p { font-size: 16px; }

@media (max-width: 840px) {
  .brand img { width: 92px; }
  .path-title, .arch-copy, .industry-copy { width: 100%; max-width: none; }
  .path-title h2, .arch-copy h2 { white-space: normal; font-size: clamp(41px, 12vw, 66px); }
  .industry-copy h2 { max-inline-size: none; }
}

/* A fixed black navigation bar and a shared vertical baseline for content. */
header {
  background: #07111f;
  color: #fff;
  border-bottom: 0;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .20);
}
header[data-theme="dark"] { background: #07111f; }
header::after { display: none; }
header > * { position: relative; z-index: 1; }

/* The hero map uses the same central alignment as the chapter-two text/list pair. */
.visible .map { transform: translateY(-45%); }

.steps { top: calc(50vh + 25px); bottom: auto; }
.days, .layers { top: calc(50vh + 25px); }
.orbit { top: calc(50vh + 25px); }
.visible .steps, .visible .days, .visible .layers, .visible .orbit {
  transform: translateY(-50%);
}

@media (max-width: 840px) {
  .visible .map { transform: none; }
  .steps, .days, .layers, .orbit { top: auto; transform: none; }
  .visible .steps, .visible .days, .visible .layers, .visible .orbit { transform: none; }
}

/* Hover labels: a restrained colour block sweeps in behind the active label. */
nav a, .meta, .kicker, .tag,
.problems article, .steps article, .days li, .layers div, .industry {
  background-image: linear-gradient(90deg, rgba(81, 190, 229, .22), rgba(81, 190, 229, .07));
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 0 100%;
  transition: background-size .34s cubic-bezier(.2, .75, .2, 1), color .24s ease, transform .24s ease;
}
nav a:hover, .meta:hover, .kicker:hover, .tag:hover,
.problems article:hover, .steps article:hover, .days li:hover, .layers div:hover, .industry:hover {
  background-size: 100% 100%;
}
.problems article:hover, .steps article:hover, .days li:hover, .layers div:hover { transform: translateX(8px); }
.dark .problems article:hover, .dark .steps article:hover, .dark .layers div:hover { color: #fff; }

/* Remove the old permanent selection fills; the hover sweep is now the single colour state. */
.steps .selected {
  margin: 0;
  padding-left: 55px;
  background-color: transparent;
  background-image: linear-gradient(90deg, rgba(81, 190, 229, .22), rgba(81, 190, 229, .07));
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 0 100%;
}
.steps .selected b { left: 0; }
.layers .hot {
  margin: 0;
  padding: 0 14px;
  border-bottom: 1px solid rgba(214, 236, 245, .2);
  background-color: transparent;
  background-image: linear-gradient(90deg, rgba(81, 190, 229, .22), rgba(81, 190, 229, .07));
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 0 100%;
}
.steps .selected:hover, .layers .hot:hover { background-size: 100% 100%; }
.industry.active {
  background-color: rgba(255, 255, 255, .80);
  box-shadow: none;
  transform: none;
}
.industry.active:hover { transform: translateY(-3px); box-shadow: 0 11px 23px rgba(18, 87, 115, .12); }

/* Final chapter: a business-diagnosis signal, replacing the decorative countdown. */
.cta {
  background:
    radial-gradient(circle at 76% 49%, rgba(38, 131, 168, .32), transparent 17%),
    radial-gradient(circle at 69% 55%, rgba(27, 107, 143, .18), transparent 31%),
    #07111f;
}
.cta-copy h2 { font-size: clamp(46px, 4.5vw, 70px); }
.contact-signal {
  position: absolute;
  top: calc(50vh + 25px);
  right: max(50px, calc((100vw - 1180px) / 2));
  width: min(38vw, 500px);
  aspect-ratio: 1;
  color: #a9e5fa;
  transform: translateY(-50%);
}
.visible .contact-signal { transform: translateY(-50%); }
.signal-ring, .signal-orbit { position: absolute; border: 1px solid rgba(122, 207, 237, .26); }
.signal-ring { border-radius: 50%; }
.ring-one { inset: 5%; animation: signal-pulse 4.5s ease-in-out infinite; }
.ring-two { inset: 20%; border-color: rgba(122, 207, 237, .18); animation: signal-pulse 4.5s 1s ease-in-out infinite; }
.ring-three { inset: 34%; border-color: rgba(122, 207, 237, .15); animation: signal-pulse 4.5s 2s ease-in-out infinite; }
.signal-orbit { left: 50%; top: 50%; width: 78%; height: 35%; border-left: 0; border-right: 0; border-radius: 50%; transform: translate(-50%, -50%) rotate(-24deg); }
.orbit-two { width: 60%; height: 68%; transform: translate(-50%, -50%) rotate(43deg); opacity: .52; }
.signal-core {
  position: absolute;
  inset: 37%;
  display: grid;
  place-content: center;
  border: 1px solid rgba(154, 225, 247, .68);
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(83, 192, 230, .62), rgba(13, 77, 107, .88));
  box-shadow: 0 0 48px rgba(42, 177, 224, .25), inset 0 0 32px rgba(190, 239, 255, .12);
  text-align: center;
}
.signal-core small { font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.signal-core strong { margin: 3px 0; color: #fff; font-size: clamp(28px, 3vw, 48px); letter-spacing: -.08em; }
.signal-core i { color: #d8f4fc; font-size: 10px; font-style: normal; white-space: nowrap; }
.signal-note { position: absolute; padding: 8px 10px; border: 1px solid rgba(162, 222, 241, .3); background: rgba(6, 28, 43, .46); color: #b9e9f8; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.note-one { left: 0; top: 20%; }
.note-two { right: 0; top: 30%; }
.note-three { bottom: 17%; left: 12%; }
@keyframes signal-pulse { 50% { opacity: .42; transform: scale(.96); } }

/* Keep the final CTA copy and its diagnostic visual in two independent columns.
   This prevents long Chinese headlines from entering the signal's label area on wide screens. */
@media (min-width: 841px) {
  .cta-copy {
    position: relative;
    z-index: 2;
    width: min(43vw, 630px);
    max-width: 630px;
  }
  .cta-copy h2 {
    max-width: 9.2em;
    font-size: clamp(44px, 3.9vw, 64px);
    text-wrap: balance;
  }
  .cta-copy > p:not(.kicker) { max-width: 510px; }
  .contact-signal {
    right: max(40px, calc((100vw - 1220px) / 2));
    width: min(34vw, 460px);
  }
}

.back-top {
  position: fixed;
  z-index: 12;
  right: 30px;
  bottom: 28px;
  display: grid;
  width: 48px;
  min-height: 48px;
  place-content: center;
  border: 1px solid rgba(139, 211, 237, .45);
  border-radius: 4px;
  background: rgba(7, 17, 31, .86);
  box-shadow: 0 10px 25px rgba(0, 0, 0, .18);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  text-align: center;
  text-decoration: none;
  transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, background .25s ease;
}
.back-top span { font-size: 17px; line-height: 1; }
.back-top small { margin-top: 2px; font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.back-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.back-top:hover { background: #167ca4; }
.back-top:focus-visible { opacity: 1; pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  .ring-one, .ring-two, .ring-three { animation: none; }
  .back-top, nav a, .meta, .kicker, .tag, .problems article, .steps article, .days li, .layers div, .industry { transition: none; }
}

@media (max-width: 840px) {
  .contact-signal { position: relative; top: auto; right: auto; width: min(86vw, 430px); margin: 42px auto 16px; transform: none; }
  .visible .contact-signal { transform: none; }
  .back-top { right: 18px; bottom: 18px; }
}

/* Public account and support concierge. */
.header-actions { display: flex; align-items: center; justify-content: flex-end; min-width: 104px; }
.account-button { min-height: 44px; min-width: 84px; padding: 0 16px; border: 1px solid rgba(163, 222, 243, .36); border-radius: 7px; background: transparent; color: inherit; font: 700 12px inherit; cursor: pointer; transition: .2s background, .2s border-color; }
.account-button:hover { border-color: #73c8e8; background: rgba(118, 204, 236, .13); }
.chat-widget { position: fixed; z-index: 14; right: 30px; bottom: 96px; }
.chat-trigger { display: inline-flex; min-height: 48px; align-items: center; gap: 9px; padding: 0 15px; border: 1px solid rgba(139, 211, 237, .5); border-radius: 4px; background: #0b2436; box-shadow: 0 14px 32px rgba(0, 0, 0, .22); color: #fff; font: 800 12px inherit; cursor: pointer; transition: transform .2s ease, background .2s ease; }
.chat-trigger:hover { background: #12688d; transform: translateY(-2px); }
.chat-trigger b { color: #8edff8; font-size: 15px; font-weight: 500; }
.chat-dot { width: 7px; height: 7px; border-radius: 50%; background: #6be0a8; box-shadow: 0 0 0 4px rgba(107, 224, 168, .12); }
.chat-panel { position: absolute; right: 0; bottom: 60px; display: grid; width: min(380px, calc(100vw - 32px)); overflow: hidden; border: 1px solid rgba(151, 215, 239, .35); border-radius: 12px; background: #081827; box-shadow: 0 24px 72px rgba(0, 0, 0, .4); color: #eaf7fb; }
.chat-panel[hidden] { display: none; }
.chat-panel header { position: static; display: flex; height: auto; align-items: flex-start; padding: 18px; background: linear-gradient(135deg, #0d6e96, #0b2940); box-shadow: none; }
.chat-panel header small, .chat-panel header em { display: block; color: #b6e5f5; font-size: 9px; font-style: normal; letter-spacing: .1em; }
.chat-panel header strong { display: block; margin: 4px 0; font-size: 16px; }
.chat-close { width: 36px; height: 36px; margin-left: auto; border: 1px solid rgba(214, 244, 254, .3); border-radius: 50%; background: transparent; color: #fff; font-size: 21px; cursor: pointer; }
.chat-messages { display: grid; max-height: 330px; min-height: 190px; gap: 10px; overflow: auto; padding: 16px; }
.chat-message { max-width: 86%; padding: 10px 12px; border-radius: 5px 12px 12px; background: #143149; color: #dff3fa; font-size: 13px; line-height: 1.65; white-space: pre-wrap; }
.chat-message.user { justify-self: end; border-radius: 12px 5px 12px 12px; background: #1179a3; color: #fff; }
.chat-suggestions { display: flex; gap: 8px; overflow: auto; padding: 0 16px 12px; }
.chat-suggestions button { flex: 0 0 auto; border: 1px solid rgba(133, 209, 238, .3); border-radius: 999px; background: transparent; color: #bdeafb; font: 700 10px inherit; padding: 7px 9px; cursor: pointer; }
.chat-panel form { display: grid; grid-template-columns: 1fr 42px; gap: 8px; padding: 13px 16px 16px; border-top: 1px solid rgba(168, 222, 242, .16); }
.chat-panel textarea { min-height: 42px; max-height: 100px; padding: 10px; border-color: rgba(170, 222, 242, .25); background: #0d2538; color: #fff; resize: none; }
.chat-panel form button { border: 0; border-radius: 7px; background: #68c8e8; color: #062033; font-size: 19px; cursor: pointer; }
.auth-modal { width: min(510px, calc(100% - 32px)); }
.auth-modal h2 { font-size: 31px; }
.auth-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 4px; margin: 22px 0 14px; border-radius: 8px; background: #eaf2f5; }
.auth-switch button { border: 0; border-radius: 5px; background: transparent; color: #5b6c78; font: 800 12px inherit; padding: 9px; cursor: pointer; }
.auth-switch button.active { background: #fff; box-shadow: 0 2px 6px rgba(26, 61, 78, .13); color: #0b628b; }
.auth-modal[data-mode="login"] .auth-profile { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) { .chat-trigger, .account-button { transition: none; } }
@media (max-width: 840px) { .header-actions { min-width: auto; } .account-button { min-height: 40px; min-width: 70px; padding: 0 10px; } .chat-widget { right: 18px; bottom: 78px; } .chat-panel { bottom: 58px; } }

/* Account center for registered users and their AI usage balance. */
.account-modal { width: min(560px, calc(100% - 32px)); padding: 34px; }
.account-hero { display: flex; align-items: center; gap: 16px; padding-right: 32px; }
.account-hero .kicker { margin-bottom: 7px; }
.account-hero h2 { font-size: 30px; }
.account-hero p:last-child { margin: 7px 0 0; color: #647685; font-size: 13px; }
.account-avatar { display: grid; width: 58px; height: 58px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: linear-gradient(145deg, #176d94, #0a2236); color: #dff4fc; font-size: 22px; font-weight: 800; }
.account-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 28px 0 0; }
.account-details div { min-height: 76px; border: 1px solid #dbe6eb; border-radius: 9px; padding: 12px 13px; background: #f8fbfc; }
.account-details dt { color: #718291; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.account-details dd { overflow-wrap: anywhere; margin: 8px 0 0; color: #173047; font-size: 14px; font-weight: 700; }
.account-details .account-credit { border-color: #99d5ea; background: #edf9fd; }
.account-credit dd { color: #09678f; }
.account-credit b { font-size: 24px; letter-spacing: -.05em; }
.account-credit span { color: #3d7185; font-size: 12px; }
.account-hint { margin: 15px 0 0; color: #6b7e8c; font-size: 12px; line-height: 1.7; }
.account-actions { display: flex; gap: 10px; margin-top: 22px; }
.account-api-keys { border: 1px solid #a7c7d4; border-radius: 7px; padding: 0 15px; background: #edf8fc; color: #0a668b; font: 700 12px inherit; cursor: pointer; }
.account-api-keys:hover { border-color: #68aeca; background: #e1f3f9; }
.account-logout { border: 1px solid #cbd8de; border-radius: 7px; padding: 0 15px; background: #fff; color: #526876; font: 700 12px inherit; cursor: pointer; }
.account-logout:hover { border-color: #89aabb; background: #f2f8fa; }
@media (max-width: 480px) { .account-modal { padding: 27px 20px; } .account-details { grid-template-columns: 1fr; } .account-actions { align-items: stretch; flex-direction: column; } .account-actions .button, .account-logout { min-height: 44px; } }

/* One-time display and lifecycle controls for user-owned image API keys. */
.api-key-modal { width: min(540px, calc(100% - 32px)); padding: 34px; }
.api-key-modal h2 { margin: 7px 0 0; font-size: 30px; }
.api-key-intro { margin: 13px 0 20px; color: #627584; font-size: 14px; line-height: 1.7; }
.api-key-list { min-height: 80px; }
.api-key-card { display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; border: 1px solid #b9dce8; border-radius: 9px; padding: 15px; background: #f3fbfe; }
.api-key-card > span { color: #467084; font-size: 11px; font-weight: 800; letter-spacing: .06em; }
.api-key-card code, .api-key-secret code { overflow-wrap: anywhere; color: #09283a; font: 700 13px ui-monospace, SFMono-Regular, Consolas, monospace; }
.api-key-card small { color: #6c8290; font-size: 11px; }
.api-key-revoke { grid-row: 1 / span 2; grid-column: 2; align-self: center; min-height: 36px; border: 1px solid #d5a5a1; border-radius: 6px; padding: 0 11px; background: #fff; color: #a23e34; font: 700 12px inherit; cursor: pointer; }
.api-key-empty { margin: 0; border: 1px dashed #cbdbe1; border-radius: 8px; padding: 18px; color: #71838f; font-size: 13px; text-align: center; }
.api-key-secret { display: grid; gap: 10px; margin: 14px 0; border: 1px solid #77bed6; border-radius: 9px; padding: 15px; background: #e7f7fc; }
.api-key-secret strong { color: #075c80; font-size: 13px; }
.api-key-secret code { border: 1px solid #bfdeea; border-radius: 6px; padding: 10px; background: #fff; }
.api-key-secret button { justify-self: start; min-height: 38px; border: 0; border-radius: 6px; padding: 0 13px; background: #126f96; color: #fff; font: 700 12px inherit; cursor: pointer; }
.api-key-secret small { color: #527684; font-size: 11px; line-height: 1.5; }
.api-key-modal > .button { min-height: 44px; }
@media (max-width: 480px) { .api-key-modal { padding: 27px 20px; } .api-key-card { grid-template-columns: 1fr; } .api-key-revoke { grid-row: auto; grid-column: auto; justify-self: start; min-height: 40px; } }

/* Hero: a living enterprise knowledge graph, built from first-party CSS and SVG. */
.hero-graph {
  background:
    radial-gradient(circle at 79% 49%, rgba(93, 184, 216, .13), transparent 24%),
    #f1f0eb;
}
.hero-graph .copy { position: relative; z-index: 2; width: min(49%, 610px); margin-top: -2vh; }
.hero-graph h1 { max-width: 9.3em; color: #081521; font-size: clamp(56px, 5.15vw, 82px); line-height: .99; text-wrap: balance; }
.hero-graph .copy > p:not(.kicker) { max-width: 455px; margin: 25px 0 31px; color: #52626a; font-size: 15px; line-height: 1.75; }
.hero-graph .kicker { margin-bottom: 19px; color: #2d84a5; letter-spacing: .16em; }
.hero-facts { display: none; }
.knowledge-graph { --graph-x: 0px; --graph-y: 0px; --graph-tilt-x: 0deg; --graph-tilt-y: 0deg; position: absolute; z-index: 1; top: 51%; right: max(21px, calc((100vw - 1230px) / 2)); width: min(51vw, 720px); aspect-ratio: 1.14; transform: translate3d(var(--graph-x), calc(-45% + var(--graph-y)), 0); transition: transform .7s cubic-bezier(.2, .75, .2, 1); }
.visible .knowledge-graph { transform: translate3d(var(--graph-x), calc(-45% + var(--graph-y)), 0); }
.graph-surface { position: absolute; inset: 0; overflow: visible; background: transparent; transform: perspective(900px) rotateX(var(--graph-tilt-x)) rotateY(var(--graph-tilt-y)); transition: transform .7s cubic-bezier(.2, .75, .2, 1); }
.graph-surface::before { content: ""; position: absolute; left: 37%; top: 17%; width: 43%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 38% 35%, rgba(170, 226, 242, .9), rgba(66, 159, 194, .2) 52%, transparent 72%); filter: blur(1px); }
.graph-surface::after { content: ""; position: absolute; left: 51%; top: 20%; width: 35%; height: 64%; border: 1px solid rgba(11, 41, 57, .15); border-left: 0; border-radius: 50%; transform: rotate(25deg); }
.graph-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.graph-lines path { stroke: rgba(7, 25, 35, .72); stroke-width: 1.2; stroke-dasharray: 3 11; animation: graph-flow 11s linear infinite; }
.graph-lines .cross { stroke: rgba(7, 25, 35, .31); stroke-width: .85; animation-duration: 18s; animation-direction: reverse; }
.graph-node { position: absolute; z-index: 2; width: 10px; height: 10px; padding: 0; border: 1px solid rgba(7, 25, 35, .72); border-radius: 50%; background: #f1f0eb; box-shadow: 0 0 0 5px rgba(241, 240, 235, .76); animation: graph-drift 7s ease-in-out infinite; }
.graph-node small, .graph-node strong, .graph-node i { display: none; }
.node-core { left: 49%; top: 46%; width: 30px; height: 30px; border: 0; background: #1786ad; box-shadow: 0 0 0 11px rgba(23, 134, 173, .1), 0 0 38px rgba(23, 134, 173, .32); animation: graph-core 4.7s ease-in-out infinite; }
.node-knowledge { left: 13%; top: 22%; animation-delay: -1.3s; }
.node-process { right: 13%; top: 19%; animation-delay: -3.2s; }
.node-rule { left: 12%; bottom: 21%; animation-delay: -4.4s; }
.node-data { right: 14%; bottom: 18%; animation-delay: -2s; }
.node-agent { left: 54%; top: 7%; animation-delay: -5.4s; }
.node-eval { left: 45%; bottom: 7%; animation-delay: -.5s; }
.graph-node:not(.node-core)::after { position: absolute; display: block; width: max-content; color: rgba(7, 25, 35, .75); font-family: Georgia, "Times New Roman", serif; font-size: clamp(10px, .95vw, 15px); font-style: italic; font-weight: 700; letter-spacing: -.04em; line-height: 1; white-space: nowrap; transform-origin: left center; animation: terminal-warp 5.5s ease-in-out infinite; }
.node-knowledge::after { content: "KNOWLEDGE / 知识"; left: 15px; top: -5px; transform: rotate(-13deg) skewX(-14deg) scaleX(1.22); animation-delay: -.4s; }
.node-process::after { content: "PROCESS / 流程"; right: 15px; top: -4px; transform: rotate(11deg) skewX(12deg) scaleX(.92); transform-origin: right center; animation-delay: -1.2s; }
.node-rule::after { content: "RULES / 规则"; left: 15px; bottom: -4px; transform: rotate(8deg) skewX(-18deg) scaleX(1.15); animation-delay: -2.1s; }
.node-data::after { content: "LIVE DATA / 数据"; right: 15px; bottom: -4px; transform: rotate(-9deg) skewX(16deg) scaleX(.88); transform-origin: right center; animation-delay: -3.2s; }
.node-agent::after { content: "AGENT"; left: 11px; top: 14px; transform: rotate(83deg) skewX(-15deg) scaleX(1.3); animation-delay: -4.1s; }
.node-eval::after { content: "EVAL / 演进"; left: 12px; bottom: 14px; transform: rotate(-14deg) skewX(-12deg) scaleX(1.12); animation-delay: -4.8s; }
.graph-pulse { position: absolute; z-index: 3; width: 6px; height: 6px; border-radius: 50%; background: #58c7e9; box-shadow: 0 0 0 5px rgba(83, 196, 232, .13), 0 0 18px #5ccdec; animation: graph-pulse 2.8s ease-in-out infinite; }
.pulse-a { left: 29%; top: 34%; animation-delay: -.6s; }
.pulse-b { right: 22%; top: 31%; animation-delay: -1.4s; }
.pulse-c { left: 39%; bottom: 25%; animation-delay: -2.1s; }
.graph-coordinate { position: absolute; color: rgba(7, 25, 35, .47); font-size: 8px; font-weight: 800; letter-spacing: .13em; }
.coordinate-a { left: 4%; bottom: 5%; }
.coordinate-b { right: 3%; top: 4%; }
.coordinate-c { right: 4%; bottom: 4%; }
.graph-caption { position: absolute; right: 2%; bottom: -12px; display: flex; align-items: center; gap: 7px; margin: 0; color: #415965; font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.graph-caption span { width: 6px; height: 6px; border-radius: 50%; background: #4dc3e7; box-shadow: 0 0 0 4px rgba(77, 195, 231, .15); animation: graph-pulse 2.8s ease-in-out infinite; }
@keyframes graph-flow { to { stroke-dashoffset: -112px; } }
@keyframes graph-spin { to { transform: rotate(360deg); } }
@keyframes graph-drift { 50% { transform: translateY(-8px); } }
@keyframes graph-core { 50% { transform: scale(1.12); box-shadow: 0 0 0 17px rgba(23, 134, 173, .07), 0 0 58px rgba(23, 134, 173, .38); } }
@keyframes graph-pulse { 50% { opacity: .4; transform: scale(.72); } }
@keyframes terminal-warp { 50% { opacity: .56; } }
@media (prefers-reduced-motion: reduce) {
  .graph-surface::after, .graph-lines path, .graph-node, .graph-node::after, .graph-pulse, .graph-caption span { animation: none; }
}
@media (max-width: 840px) {
  .hero-graph { display: block; padding-top: 135px; }
  .hero-graph .copy { width: 100%; }
  .knowledge-graph { position: relative; top: auto; right: auto; width: min(94vw, 570px); margin: 42px auto 42px; transform: none; }
  .visible .knowledge-graph { transform: none; }
  .graph-caption { bottom: -26px; right: 2px; }
  .node-core { width: 27px; height: 27px; }
  .graph-node { min-width: 0; padding: 0; }
  .graph-node:not(.node-core)::after { font-size: 9px; }
  .graph-coordinate { display: none; }
}
@media (max-width: 480px) {
  .hero-facts { gap: 5px; }
  .hero-facts span { padding: 6px 7px; font-size: 9px; }
  .node-core { left: 47%; width: 24px; height: 24px; }
  .graph-node:not(.node-core)::after { font-size: 8px; }
}