.ehero{grid-template-columns:1fr 1fr;align-items:center;gap:40px}
.viz{position:relative;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,var(--surface),#181716);padding:28px;overflow:hidden;min-height:260px;box-shadow:0 30px 70px rgba(0,0,0,.4)}
.cap{padding:84px 0;border-top:1px solid var(--line)}
.split{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center}
.split.rev>div:first-child{order:2}
.cap h2{margin-top:12px}
.cap p{max-width:480px}
.js .scene .anim,.js .scene .anim::before,.js .scene .anim::after{animation-play-state:paused}
.js .scene.live .anim,.js .scene.live .anim::before,.js .scene.live .anim::after{animation-play-state:running}
.js .scene .viz i,.js .scene .viz span{animation-play-state:paused}
.js .scene.live .viz i,.js .scene.live .viz span{animation-play-state:running}
/* hero */
.hv{min-height:360px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:20px}
.chips{display:flex;flex-direction:column;gap:8px;animation:drift 5s ease-in-out infinite alternate}
.chip{font-family:var(--mono);font-size:12px;color:var(--text-2);background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:5px 9px;width:max-content;animation:chipin 4s var(--ease) infinite}
.chip.c1{animation-delay:.5s}.chip.c2{animation-delay:1s}.chip.c3{animation-delay:1.5s}
.core{position:relative;width:96px;height:96px;display:grid;place-items:center}
.core b{position:relative;width:56px;height:56px;border-radius:16px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-size:26px;font-weight:600;box-shadow:0 0 40px rgba(60,196,176,.5)}
.ring{position:absolute;inset:0;border-radius:50%;border:1px solid var(--accent);opacity:0;animation:pulse 3s var(--ease) infinite}
.ring.r2{animation-delay:1.5s}
.out{display:flex;flex-direction:column;gap:18px;padding-left:6px}
.out i{display:block;height:6px;border-radius:3px;background:var(--accent);transform-origin:left;animation:grow 3s var(--ease) infinite}
.out .o1{width:90%}.out .o2{width:60%;animation-delay:.4s}.out .o3{width:35%;animation-delay:.8s}
@keyframes drift{to{transform:translateX(8px)}}
@keyframes chipin{0%{opacity:0;transform:translateX(-14px)}25%,70%{opacity:1;transform:none}100%{opacity:0;transform:translateX(34px) scale(.7)}}
@keyframes pulse{0%{opacity:.8;transform:scale(.6)}100%{opacity:0;transform:scale(1.3)}}
@keyframes grow{0%{transform:scaleX(0);opacity:.3}40%,80%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:.3}}
/* 1 routing */
.lanes{display:flex;flex-direction:column;gap:14px}
.lane{position:relative;height:52px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden}
.lane span{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:12px;color:var(--text-3)}
.lane:nth-child(3){border-color:rgba(60,196,176,.4)}
.dot{position:absolute;left:0;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px rgba(60,196,176,.7);animation:run 3.2s linear infinite}
.d1{animation-duration:1.8s}.d4{animation-duration:1.8s;animation-delay:.9s}
.d2{animation-duration:2.8s;animation-delay:.3s}.d5{animation-duration:2.8s;animation-delay:1.7s}
.d3{animation-duration:4.4s;animation-delay:.6s}.d6{animation-duration:4.4s;animation-delay:2.8s}
@keyframes run{0%{left:-12px;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:70%;opacity:0}}
/* 2 context */
.bars{display:flex;align-items:center;justify-content:center;gap:5px;height:150px}
.b{display:block;width:9px;border-radius:3px;background:var(--surface-3);animation:condense 6s var(--ease) infinite}
.b.h0{height:46px}.b.h1{height:90px}.b.h2{height:64px}.b.h3{height:120px}.b.h4{height:36px}.b.h5{height:100px}
.b.k{background:var(--accent);animation-name:keep}
@keyframes condense{0%,25%{opacity:1;width:9px;margin:0}55%,85%{opacity:0;width:0;margin:0 -2.5px}100%{opacity:1;width:9px;margin:0}}
@keyframes keep{0%,25%{width:9px;box-shadow:none}55%,85%{width:20px;box-shadow:0 0 18px rgba(60,196,176,.7)}100%{width:9px;box-shadow:none}}
.cap-l{display:flex;justify-content:space-between;margin-top:18px;font-family:var(--mono);font-size:12px;color:var(--text-3)}
/* 3 memory */
.facts{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.f{font-family:var(--mono);font-size:11px;text-align:center;padding:9px 2px;border-radius:8px;background:var(--surface-2);color:var(--text-3);animation:noise 5s ease-in-out infinite}
.f.m1{animation-delay:.6s}.f.m2{animation-delay:1.2s}.f.m3{animation-delay:1.8s}.f.m4{animation-delay:2.4s}
.f.k{color:var(--accent-ink);background:var(--accent);font-weight:500;animation:glow 5s ease-in-out infinite}
@keyframes noise{0%,20%{opacity:.9}55%,85%{opacity:.08;transform:scale(.9)}100%{opacity:.9}}
@keyframes glow{0%,100%{box-shadow:0 0 0 rgba(60,196,176,0)}50%{box-shadow:0 0 22px rgba(60,196,176,.65)}}
/* 4 idle */
.sessions{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;align-items:start;height:170px}
.sess{border-radius:10px;background:var(--surface-2);border:1px solid var(--line);padding:10px;height:150px;transform-origin:top;animation:fold 7s var(--ease) infinite}
.sess i{display:block;height:6px;width:60%;border-radius:3px;background:var(--accent);margin-bottom:8px}
.sess b{display:block;height:4px;border-radius:2px;background:var(--surface-3);margin-bottom:6px}
.s1{animation-delay:.6s}.s2{animation-delay:1.2s}.s3{animation-delay:1.8s}.s4{animation-delay:2.4s}
@keyframes fold{0%,20%{transform:none;opacity:1}45%,75%{transform:scaleY(.22);opacity:.35}100%{transform:none;opacity:1}}
/* 5 tools */
.tools{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.tl{font-family:var(--mono);font-size:12px;text-align:center;padding:16px 4px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line);color:var(--text-3);animation:lit 9s ease-in-out infinite;animation-delay:-20s}
.t1,.t6,.t10{animation-delay:0s}.t3,.t5,.t8{animation-delay:3s}.t0,.t7,.t11{animation-delay:6s}
.tl.t2,.tl.t4,.tl.t9{animation:none}
@keyframes lit{0%,28%{color:var(--accent-ink);background:var(--accent);border-color:var(--accent);box-shadow:0 0 22px rgba(60,196,176,.55)}34%,100%{color:var(--text-3);background:var(--surface-2);border-color:var(--line);box-shadow:none}}
/* 6 savings */
.savings{display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:center;margin:28px 0}
.gauge{position:relative;width:220px;height:220px}
.gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.gauge circle{fill:none;stroke-width:9}
.gt{stroke:var(--surface-3)}
.gv{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:57;filter:drop-shadow(0 0 6px rgba(60,196,176,.6))}
.js .gv{animation:fill 1.6s var(--ease) both;animation-play-state:paused}
.js .scene.live .gv{animation-play-state:running}
@keyframes fill{from{stroke-dashoffset:100}to{stroke-dashoffset:57}}
.gn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:2px}
.gn b{font-size:60px;font-weight:500;letter-spacing:-.03em;color:var(--text)}
.gn em{font-style:normal;font-size:26px;color:var(--accent)}
.gtext h3{font-size:24px}
.mini{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
.mini b{display:block;font-size:32px;font-weight:500;color:var(--accent);letter-spacing:-.02em}
.mini span{font-size:14px;color:var(--text-2)}
@media(max-width:860px){.ehero,.split,.savings{grid-template-columns:1fr}.split.rev>div:first-child{order:0}.cap{padding:52px 0}.split{gap:28px}.hv{min-height:300px}.gauge{width:180px;height:180px}.gn b{font-size:48px}.mini{grid-template-columns:1fr}.facts{gap:6px}.viz{padding:18px}}
@media(max-width:480px){.hv{grid-template-columns:1fr auto 0.6fr}.core{width:72px;height:72px}.core b{width:44px;height:44px;font-size:20px}.chip{font-size:11px}}