.hero-copy > * { animation: text-arrive .8s cubic-bezier(.22,1,.36,1) both; }
.hero-copy h1 { animation-delay: .1s; }
.hero-description { animation-delay: .2s; }
.hero-actions { animation-delay: .3s; }
.hero-footnote { animation-delay: .4s; }
.hero-path { position:absolute; z-index:2; right:5%; bottom:76px; display:flex; align-items:center; gap:12px; padding:15px 18px; border:1px solid #38555f; background:#0b1924ed; font:500 .875rem Mono,monospace; box-shadow:0 16px 50px #0005; animation:text-arrive .9s .45s both; }
.hero-path strong { color:var(--accent); font-weight:500; }
.hero-path i { position:relative; width:28px; height:1px; background:#456271; overflow:hidden; }
.hero-path i::after { content:""; position:absolute; height:1px; width:14px; background:var(--accent); animation:signal-right 1.2s 1s 2; }
.hero-path i:last-of-type::after { animation-delay:1.6s; }
.hero-visual::before { content:""; position:absolute; top:12%; bottom:12%; width:1px; z-index:1; background:linear-gradient(transparent,#b0f8ff,transparent); box-shadow:0 0 28px 8px #87f0f022; animation:scan-once 1.8s .3s both; pointer-events:none; }

.architecture-section { padding-block:96px; background:#0b171f; border-bottom:1px solid var(--line); }
.architecture-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-bottom:40px; }
.architecture-heading h2 { margin-top:22px; font-size:clamp(2.4rem,4vw,3.7rem); }
.architecture-heading > p { max-width:330px; font-size:1rem; }
.flow-canvas { --flow-duration:1500ms; position:relative; padding:32px; border:1px solid #38515e; border-radius:6px; background:linear-gradient(110deg,#122a3480,transparent 70%),radial-gradient(#7298a51c .7px,transparent .7px); background-size:auto,16px 16px; }
.flow-toolbar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px; }
.flow-caption { display:flex; flex-direction:column; gap:6px; }
.flow-caption > span { font:.75rem Mono,monospace; color:#8cabb8; letter-spacing:.08em; }
.flow-caption strong { font-size:.94rem; font-weight:500; color:#d6e6eb; }
.flow-play { min-height:44px; border:1px solid #5a7b88; border-radius:3px; background:#102630; padding:10px 17px; color:var(--accent); font:500 .875rem Inter,sans-serif; cursor:pointer; transition:background .2s,border-color .2s; }
.flow-play:hover { background:#1b3a43; border-color:var(--accent); }
.flow-play:disabled { opacity:.55; cursor:default; }
.flow-track { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:28px; margin-block:40px 34px; }
.flow-node { position:relative; isolation:isolate; min-width:0; display:flex; flex-direction:column; align-items:flex-start; text-align:left; padding:22px 18px 20px; border:1px solid #45616e; background:#101f29; color:var(--ink); border-radius:4px; cursor:pointer; transition:background .3s,border-color .3s,transform .3s,box-shadow .3s; }
.flow-node:disabled { opacity:1; cursor:default; }
.flow-node:hover { transform:translateY(-5px); border-color:#8ab3bc; background:#162f3b; }
.flow-node[aria-pressed="true"] { border-color:var(--accent); background:#163b42; box-shadow:0 0 0 1px #81f1ec40,0 10px 30px #0002; }
.flow-node.is-passed { border-color:#438585; }
.node-number { position:absolute; right:14px; top:14px; color:#8fadb9; font:.75rem Mono,monospace; }
.node-symbol { display:grid; place-items:center; width:46px; height:46px; margin-bottom:24px; border:1px solid #4e6975; color:#b9cdd6; border-radius:4px; font:1.35rem Mono,monospace; }
.flow-node[aria-pressed="true"] .node-symbol { border-color:#75ddd5; color:var(--accent); background:#66eee312; }
.node-title { display:block; font-size:1rem; font-weight:600; letter-spacing:-.02em; }
.node-description { display:block; margin-top:8px; color:#a5beca; font-size:.875rem; line-height:1.5; }
.node-core { position:absolute; top:-11px; left:12px; padding:3px 8px; border:1px solid #51938f; background:#0e2a30; color:var(--accent); font:.75rem Mono,monospace; }
.node-link { position:absolute; left:100%; top:50%; width:29px; height:2px; background:#3a5967; pointer-events:none; }
.node-link::before { content:""; position:absolute; right:1px; top:-3px; width:6px; height:6px; border-top:1px solid #7798a5; border-right:1px solid #7798a5; transform:rotate(45deg); }
.node-link::after { content:""; position:absolute; inset:0; width:9px; opacity:0; background:var(--accent); box-shadow:0 0 9px #7cece8; }
.is-running .flow-node[aria-pressed="true"] .node-link::after { opacity:1; animation:signal-right var(--flow-duration) linear; }
.node-progress { position:absolute; bottom:0; left:0; right:0; height:2px; overflow:hidden; border-radius:0 0 4px 4px; }
.is-running .flow-node[aria-pressed="true"] .node-progress::after { content:""; display:block; height:100%; background:var(--accent); transform-origin:left; animation:step-progress var(--flow-duration) linear; }
.flow-panels { display:grid; }
.flow-detail { display:grid; grid-area:1/1; grid-template-columns:1fr 1.55fr; gap:32px; padding:26px 0 0; border-top:1px solid #3d5b68; min-height:158px; animation:detail-arrive .32s ease-out; }
.flow-detail[hidden] { display:grid; visibility:hidden; pointer-events:none; animation:none; }
.flow-detail h3 { font-size:1.45rem; line-height:1.3; letter-spacing:-.035em; max-width:300px; }
.flow-detail p { font-size:1rem; max-width:590px; }
.flow-detail .tags { margin-top:15px; }
.flow-detail .tags li { font-size:.8rem; border-color:#3b5867; }
.flow-footnote { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:28px; color:#91aebc; font-size:.8rem; }
.flow-footnote span { font:.8rem Mono,monospace; color:#bee8e6; }
.firmware-section { display:grid; grid-template-columns:.8fr 1.5fr; align-items:start; gap:64px; padding-block:0 100px; }
.firmware-intro { padding-top:25px; }
.firmware-intro h2 { font-size:clamp(2.3rem,3.2vw,3.2rem); margin-block:24px; }
.firmware-intro > p:not(.eyebrow) { font-size:1rem; }
.firmware-intro .text-link { margin-top:22px; }
.firmware-flow { padding:28px; background:linear-gradient(135deg,#142932,#0d1921); }
.firmware-flow .flow-track { grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; margin-block:32px 0; }
.firmware-flow .flow-node { padding:36px 10px 17px; }
.firmware-flow .node-number { top:10px; right:auto; left:12px; }
.firmware-flow .node-title { font-size:.9rem; }
.firmware-flow .node-description { font-size:.8rem; }
.firmware-flow .node-link { width:21px; }
.firmware-flow .flow-detail { grid-template-columns:1fr; gap:10px; min-height:193px; padding-top:22px; }
.firmware-flow .flow-detail h3 { max-width:none; font-size:1.3rem; }
.recovery-branch { position:relative; display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 24px 14px; padding:24px 0 0 22px; border-left:1px dashed #698089; }
.recovery-branch::before { content:""; position:absolute; top:47px; left:0; width:19px; height:1px; background:#698089; }
.recovery-branch > span { font:.8rem/1.5 Mono,monospace; color:#a3bcc6; }
.recovery-branch .flow-node { display:block; padding:11px 14px; border-style:dashed; }
.recovery-branch .node-title { font-size:.875rem; }
.recovery-branch .node-description { margin-top:3px; font-size:.8rem; }
.firmware-flow .flow-footnote { margin-top:16px; font-size:.75rem; align-items:flex-start; }
.service { overflow:hidden; }
.service::after { content:""; position:absolute; bottom:0; left:0; width:100%; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .4s; }
.service:hover::after,.service:focus-within::after { transform:scaleX(1); }
.service-glyph { transition:transform .35s; }
.service:hover .service-glyph { transform:translateX(5px); }
.delivery-step { position:relative; }
.delivery-step::before { content:""; position:absolute; left:0; top:-3px; width:5px; height:5px; background:var(--accent); transition:width .4s; }
.delivery-step:hover::before { width:40px; }
.reveal-target { transition:opacity .65s ease,transform .65s cubic-bezier(.22,1,.36,1); transition-delay:var(--reveal-delay,0ms); }
.reveal-pending { opacity:0; transform:translateY(24px); }
.reveal-target:focus-within { opacity:1; transform:none; transition:none; }

@keyframes text-arrive { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@keyframes detail-arrive { from { opacity:.55; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
@keyframes scan-once { 0% { left:20%; opacity:0; } 20% { opacity:.8; } 80% { opacity:.8; } 100% { left:90%; opacity:0; } }
@keyframes signal-right { from { transform:translateX(-10px); } to { transform:translateX(30px); } }
@keyframes step-progress { from { transform:scaleX(0); } to { transform:scaleX(1); } }

@media(max-width:1150px) {
  .flow-canvas { padding:26px; }
  .flow-track { gap:20px; }
  .flow-node { padding:20px 12px; }
  .node-link { width:21px; }
  .node-title { font-size:.94rem; }
  .firmware-section { grid-template-columns:.8fr 1.4fr; gap:35px; }
  .firmware-flow .flow-track { gap:12px; }
  .firmware-flow .node-link { width:13px; }
}
@media(max-width:850px) {
  .architecture-section { padding-block:70px; }
  .architecture-heading { align-items:flex-start; flex-direction:column; gap:24px; }
  .architecture-heading > p { max-width:550px; }
  .flow-track { gap:14px; }
  .flow-node { padding:19px 10px; }
  .node-symbol { width:36px; height:36px; font-size:1.1rem; }
  .node-link { width:15px; }
  .node-title { font-size:.875rem; }
  .node-description { font-size:.8rem; }
  .node-number { right:8px; top:8px; }
  .node-core { left:5px; font-size:.75rem; }
  .flow-detail { grid-template-columns:1fr 1.3fr; min-height:205px; }
  .firmware-section { grid-template-columns:1fr; gap:30px; padding-bottom:75px; }
  .firmware-intro { max-width:620px; padding-top:0; }
  .firmware-flow .flow-track { gap:22px; }
  .firmware-flow .node-link { width:23px; }
  .firmware-flow .node-title { font-size:1rem; }
  .firmware-flow .node-description { font-size:.875rem; }
  .firmware-flow .flow-detail { min-height:135px; }
  .hero-path { right:4%; font-size:.8rem; gap:10px; padding:13px; }
}
@media(max-width:620px) {
  .hero-path { bottom:54px; right:50%; transform:translateX(50%); white-space:nowrap; font-size:.8rem; animation:none; }
  .hero-path i { width:23px; }
  .architecture-section { padding-block:60px; }
  .architecture-heading h2 { font-size:2.4rem; }
  .flow-canvas { padding:22px 20px; }
  .flow-toolbar { align-items:flex-start; }
  .flow-play { font-size:.875rem; }
  .flow-track { grid-template-columns:1fr; gap:22px; margin-block:30px; }
  .flow-node { padding:17px 48px 17px 76px; min-height:84px; }
  .node-symbol { position:absolute; top:20px; left:18px; margin:0; width:38px; height:38px; }
  .node-title { font-size:1rem; }
  .node-description { font-size:.875rem; margin-top:5px; }
  .node-number { right:15px; top:17px; }
  .node-core { left:auto; right:10px; font-size:.75rem; }
  .node-link { width:2px; height:23px; top:100%; left:36px; }
  .node-link::before { right:-2px; top:auto; bottom:2px; transform:rotate(135deg); }
  .node-link::after { width:2px; height:8px; }
  .is-running .flow-node[aria-pressed="true"] .node-link::after { animation-name:signal-down; }
  .flow-node:hover { transform:none; }
  .flow-detail { grid-template-columns:1fr; gap:14px; min-height:225px; }
  .flow-detail h3 { max-width:none; font-size:1.4rem; }
  .flow-detail .tags li { font-size:.75rem; }
  .flow-footnote { align-items:flex-start; flex-direction:column; gap:10px; margin-top:24px; }
  .firmware-section { padding-bottom:60px; }
  .firmware-flow .flow-track { grid-template-columns:1fr 1fr; gap:18px; }
  .firmware-flow .flow-node { padding:33px 12px 17px; min-height:100px; }
  .firmware-flow .node-description { font-size:.8rem; }
  .firmware-flow .node-title { font-size:.94rem; }
  .firmware-flow .node-link { display:none; }
  .firmware-flow .flow-detail { min-height:230px; }
  .recovery-branch { margin-left:9px; padding-left:15px; gap:10px; }
  .recovery-branch::before { width:12px; }
  .recovery-branch > span { font-size:.75rem; }
  .recovery-branch .flow-node { min-height:0; padding:12px; }
}
@keyframes signal-down { from { transform:translateY(-8px); } to { transform:translateY(23px); } }
@media(prefers-reduced-motion:reduce) {
  .reveal-pending { opacity:1; transform:none; }
  .hero-copy > * { opacity:1; transform:none; }
  .hero-visual::before,.hero-path i::after,.node-link::after { display:none; }
  .flow-node:hover { transform:none; }
}
@media print {
  .reveal-pending { opacity:1; transform:none; }
  .flow-play,.hero-path { display:none; }
  .flow-canvas,.flow-node,.architecture-section { background:white; color:black; }
  .architecture-section { padding-block:30px; }
  .flow-track { gap:14px; }
  .flow-detail { break-inside:avoid; }
  .firmware-section { display:block; }
}