@media (min-width: 901px) {
  .hero h1 {
    font-size: clamp(58px, 6vw, 92px);
    line-height: 1.02;
  }
}

.ambient-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

body {
  position: relative;
  isolation: isolate;
}

.site-header {
  position: relative;
  z-index: 5;
  background: rgba(250, 250, 250, .82);
  backdrop-filter: blur(12px);
}

.capability-flow {
  position: relative;
  min-height: 390px;
  padding: 22px;
  overflow: hidden;
  color: #fff;
  background: #18181b;
  border: 1px solid #2f3036;
  box-shadow: 0 20px 45px rgba(9, 9, 11, .14);
}

.capability-flow::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
}

.capability-flow::after {
  content: "";
  position: absolute;
  top: -30%;
  left: 0;
  width: 100%;
  height: 26%;
  background: linear-gradient(to bottom, transparent, rgba(37, 99, 235, .18), transparent);
  animation: flow-scan 5s linear infinite;
}

.flow-head, .flow-map, .flow-result { position: relative; z-index: 1; }
.flow-head { display: flex; align-items: center; justify-content: space-between; font: 600 10px Archivo; color: #a8abb4; }
.flow-head b { color: #c8ff4d; font-weight: 600; }
.flow-map { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 62px; }
.flow-track { position: absolute; z-index: -1; left: 13%; right: 13%; top: 27px; height: 1px; background: #4b4d55; }
.flow-track i { position: absolute; top: -3px; width: 7px; height: 7px; background: #c8ff4d; animation: signal-run 3.6s linear infinite; }
.flow-track i:nth-child(2) { animation-delay: -1.2s; }
.flow-track i:nth-child(3) { animation-delay: -2.4s; }
.flow-node { min-width: 0; padding-top: 40px; }
.flow-node::before { content: ""; position: absolute; top: 20px; width: 14px; height: 14px; border: 3px solid #18181b; background: #fff; box-shadow: 0 0 0 1px #6a6c74; }
.flow-node small, .flow-node strong, .flow-node span { display: block; }
.flow-node small { color: #8f929b; font: 500 8px Archivo; }
.flow-node strong { margin-top: 7px; font-size: 14px; white-space: nowrap; }
.flow-node span { margin-top: 2px; color: #a8abb4; font-size: 10px; }
.flow-result { display: grid; grid-template-columns: 1fr auto; align-items: end; margin-top: 42px; padding-top: 18px; border-top: 1px solid #3a3b42; }
.flow-result > span { align-self: start; color: #a8abb4; font-size: 10px; }
.flow-result strong { grid-row: 1 / 3; grid-column: 2; color: #fff; font: 600 70px/.8 Archivo; }
.flow-result sup { color: #c8ff4d; font-size: 22px; }
.flow-result p { margin: 8px 0 0; color: #e4e4e7; font-size: 12px; }

.reveal.on .flow-node { animation: node-enter .42s both; }
.reveal.on .flow-node:nth-of-type(3) { animation-delay: .08s; }
.reveal.on .flow-node:nth-of-type(4) { animation-delay: .16s; }

@keyframes signal-run { from { left: 0; } to { left: 100%; } }
@keyframes flow-scan { from { transform: translateY(0); } to { transform: translateY(540%); } }
@keyframes node-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .capability-flow { min-height: 370px; }
}

@media (max-width: 560px) {
  .capability-flow { min-height: 350px; }
  .flow-node strong { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .capability-flow::after, .flow-track i, .reveal.on .flow-node { animation: none; }
}

.live-demo {
  min-height: 560px;
  overflow: hidden;
  border: 1px solid #35363d;
  background: #0c0d10;
}
.embedded-app { min-width: 0; height: 660px; overflow: hidden; border: 1px solid #35363d; background: #0c0d10; }
.embedded-app iframe { display: block; width: 100%; height: 100%; border: 0; background: #f7f8fa; }
@media(max-width:720px){.embedded-app{height:760px}}
.demo-bar { height: 46px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #2c2d33; background: #17181d; }
.demo-bar strong { font: 600 11px Archivo; }
.runtime-state { display: inline-flex; align-items: center; gap: 7px; color: #a8abb4; font-size: 10px; }
.runtime-state::before { content: ""; width: 7px; height: 7px; background: #c8ff4d; }
.runtime-state.live::before { background: #39d98a; box-shadow: 0 0 10px rgba(57,217,138,.55); }
.demo-body { display: grid; grid-template-rows: auto 1fr; min-height: 514px; }
.demo-controls { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 18px; border-bottom: 1px solid #2c2d33; }
.demo-controls.three { grid-template-columns: repeat(2,1fr); }
.demo-controls label { color: #8f929b; font-size: 10px; }
.demo-controls input,.demo-controls select,.demo-controls textarea { width: 100%; min-height: 42px; margin-top: 5px; padding: 9px 11px; border: 1px solid #3a3c44; border-radius: 4px; background: #131419; color: #fff; font: 12px/1.5 "Space Grotesk","Microsoft YaHei"; }
.demo-controls textarea { min-height: 70px; resize: vertical; }
.demo-controls .wide { grid-column: 1 / -1; }
.run-demo { align-self: end; min-height: 42px; padding: 9px 16px; cursor: pointer; border: 0; border-radius: 4px; background: #c8ff4d; color: #111; font-weight: 700; transition: transform .2s,background .2s; }
.run-demo:hover { transform: translateY(-1px); background: #d5ff76; }
.demo-output { display: grid; grid-template-columns: 1fr 1fr; min-height: 330px; }
.output-pane,.trace-pane { min-width: 0; padding: 18px; }
.trace-pane { border-left: 1px solid #2c2d33; background: #101116; }
.pane-label { display: flex; justify-content: space-between; color: #737680; font: 600 9px Archivo; }
.result-list { margin-top: 14px; }
.result-item { padding: 11px 0; border-top: 1px solid #2d2e34; }
.result-item:first-child { border-top: 0; }
.result-item strong,.result-item span { display: block; }
.result-item strong { font-size: 13px; }
.result-item span { color: #9699a2; font-size: 11px; }
.score { color: #c8ff4d!important; font: 600 10px Archivo; }
.trace-log { margin: 14px 0 0; color: #9ee7ff; white-space: pre-wrap; overflow-wrap: anywhere; font: 10px/1.8 Consolas,monospace; }
.demo-response { margin-top: 14px; color: #e4e4e7; white-space: pre-wrap; font-size: 12px; line-height: 1.7; }
.code-proof { margin-top: 14px; border-top: 1px solid #2d2e34; }
.code-proof summary { padding: 10px 0; cursor: pointer; color: #a8abb4; font-size: 10px; }
.code-proof pre { max-height: 150px; overflow: auto; margin: 0; color: #b9f18b; white-space: pre-wrap; font: 9px/1.6 Consolas,monospace; }
.project-proof { display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 10px; margin: 4px 0 20px; padding-top: 14px; border-top: 1px solid #35363d; color: #858891; font-size: 10px; }
.project-proof img { width: 58px; height: 42px; object-fit: cover; object-position: top; border: 1px solid #44464e; }
.implementation-path{margin:24px 0;padding-top:18px;border-top:1px solid #35363d}.implementation-path>span{color:#858891;font-size:10px}.implementation-path h4{margin:8px 0 14px;font:600 16px Archivo,"Microsoft YaHei"}.implementation-path ol{margin:0;padding:0;list-style:none;counter-reset:path}.implementation-path li{position:relative;padding:8px 0 8px 28px;color:#858891;font-size:11px;border-top:1px solid #292a30}.implementation-path li:before{counter-increment:path;content:counter(path,decimal-leading-zero);position:absolute;left:0;color:#5d6069;font:600 9px Archivo}.implementation-path li.active{color:#fff}.implementation-path li.active:before{color:#c8ff4d}
.demo-error { color: #ff8a8a; }

@media (max-width: 720px) {
  .live-demo { min-height: 650px; }
  .demo-controls,.demo-controls.three { grid-template-columns: 1fr; }
  .demo-controls .wide { grid-column: 1; }
  .demo-output { grid-template-columns: 1fr; }
  .trace-pane { border-top: 1px solid #2c2d33; border-left: 0; }
}