/* =========================================================
   HERO v2: Agent orbs · living network · Agent Room
   ========================================================= */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.hero{--mx:50%;--my:30%;position:relative;padding:96px 0 96px;display:flex;flex-direction:column;align-items:center;overflow:hidden;isolation:isolate}

/* ---- background layers ---- */
.aurora{position:absolute;inset:0 0 35% 0;z-index:-4;pointer-events:none;overflow:hidden}
.aurora span{position:absolute;border-radius:50%;will-change:transform;mix-blend-mode:screen}
.au1{width:62vw;height:42vw;left:-8%;top:-12%;background:radial-gradient(closest-side,rgba(79,192,197,.14),transparent);animation:au1 28s ease-in-out infinite alternate}
.au2{width:54vw;height:40vw;right:-10%;top:-4%;background:radial-gradient(closest-side,rgba(250,249,245,.05),transparent);animation:au2 32s ease-in-out infinite alternate}
.au3{width:40vw;height:30vw;left:30%;top:30%;background:radial-gradient(closest-side,rgba(79,192,197,.07),transparent);animation:au3 36s ease-in-out infinite alternate}
.au4{width:30vw;height:24vw;left:8%;top:44%;background:radial-gradient(closest-side,rgba(250,249,245,.035),transparent);animation:au2 40s ease-in-out infinite alternate-reverse}
@keyframes au1{to{transform:translate(14vw,8vw) scale(1.15)}}
@keyframes au2{to{transform:translate(-12vw,10vw) scale(.9)}}
@keyframes au3{to{transform:translate(-16vw,-6vw) scale(1.25)}}
.hero::before{content:'';position:absolute;inset:0;z-index:-3;pointer-events:none;background:radial-gradient(520px circle at var(--mx) var(--my),rgba(79,192,197,.075),transparent 62%)}
.hero::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.07;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent);mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero-canvas{position:absolute;inset:0;z-index:-2;pointer-events:none}

/* orbital sigil behind the headline */
.sigil{position:absolute;left:50%;top:330px;width:min(1100px,120vw);aspect-ratio:1;translate:-50% -50%;z-index:-2;pointer-events:none;opacity:.9;
  mask-image:radial-gradient(closest-side,#000 40%,transparent 100%);-webkit-mask-image:radial-gradient(closest-side,#000 40%,transparent 100%);animation:sgspin 180s linear infinite}
.sigil ellipse,.sigil .sg-c{fill:none;stroke:rgba(250,249,245,.055);stroke-width:1}
.sigil .sg-c{stroke-dasharray:2 7}
.sigil .sg-c2{fill:none;stroke:rgba(79,192,197,.07);stroke-width:1;stroke-dasharray:1 12}
.sigil .sg-dot{opacity:.8}
@keyframes sgspin{to{rotate:360deg}}

/* ---- hero copy ---- */
.hero-copy{position:relative;z-index:2;text-align:center;max-width:860px;padding:0 24px}
.hero .eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 13px 6px 10px;border-radius:30px;border:1px solid var(--line2);background:rgba(20,20,19,.5);color:#d6d4cc;margin-bottom:26px}
.eb-dot{width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 3px rgba(79,192,197,.18);animation:blink 2s infinite}
.hero h1{font:400 clamp(40px,5.6vw,76px)/1.06 var(--serif);letter-spacing:-2px;margin-bottom:24px;text-shadow:0 2px 40px rgba(20,20,19,.9)}
.hero h1 em{font-style:italic;background:linear-gradient(100deg,#4fc0c5 0%,#9fe0e3 45%,#4fc0c5 90%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 9s ease-in-out infinite}
@keyframes sheen{50%{background-position:100% 0}}
.lead{font-size:clamp(16px,1.3vw,18.5px);color:#cfcdc5;max-width:680px;margin:0 auto}
.hero-cta{display:flex;justify-content:center;gap:12px;margin-top:34px;flex-wrap:wrap}
.scroll-cue{margin-top:46px;width:22px;height:34px;border:1px solid var(--line2);border-radius:12px;position:relative}
.scroll-cue span{position:absolute;left:10px;top:7px;width:2px;height:6px;background:var(--muted);border-radius:2px;animation:cue 2s ease-in-out infinite}
@keyframes cue{50%{transform:translateY(9px);opacity:.3}}

/* ---- Agent node (flat, neutral) ---- */
.orb{--s:56px;--c:#4fc0c5;display:inline-block;position:relative;width:var(--s);height:var(--s);border-radius:50%;flex:none}
.orb-halo{display:block;position:absolute;inset:-45%;border-radius:50%;background:radial-gradient(closest-side,rgba(79,192,197,.16),transparent);opacity:0;transition:opacity .5s}
.orb-ring{display:block;position:absolute;inset:-4px;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 70%,rgba(79,192,197,.9) 92%,transparent 93%);
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1px));mask:radial-gradient(closest-side,transparent calc(100% - 1.5px),#000 calc(100% - 1px));
  opacity:.55;animation:orbspin 7s linear infinite}
.orb-core{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;background:#262624;border:1px solid rgba(250,249,245,.14);transition:background .4s,border-color .4s}
.orb-core svg{width:42%;height:42%;fill:none;stroke:#e8e6df;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke .4s}
.orb-sat{display:block;position:absolute;inset:-10px;border-radius:50%;border:1px dashed rgba(250,249,245,.08);animation:orbspin 12s linear infinite reverse}
.orb-sat::before{content:'';position:absolute;top:-2px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#a8a69e}
.orb.mini .orb-sat,.orb.mini .orb-halo,.orb.mini .orb-ring{display:none}
.orb.mini .orb-core{border-color:rgba(250,249,245,.12)}
.orb.lead .orb-core{background:#4fc0c5;border-color:#4fc0c5}
.orb.lead .orb-core svg{stroke:#141413}
.orb.lead .orb-ring{opacity:1}
.orb.pulse .orb-core{animation:orbpulse .9s var(--ease)}
.orb.pulse .orb-halo{opacity:1}
.orb.working .orb-ring{opacity:1;animation-duration:1.3s}
.orb.working .orb-core{border-color:rgba(79,192,197,.6)}
.orb.working .orb-core svg{stroke:#fff}
.orb.working .orb-halo{opacity:1;animation:halo 1.6s ease-in-out infinite}
@keyframes orbspin{to{rotate:360deg}}
@keyframes orbpulse{0%{transform:scale(1)}35%{transform:scale(1.1);box-shadow:0 0 0 5px rgba(79,192,197,.18)}100%{transform:scale(1)}}
@keyframes halo{50%{transform:scale(1.15);opacity:.7}}

/* ---- floating hero agents ---- */
.hero-agents{position:absolute;left:0;right:0;top:0;height:700px;z-index:1;pointer-events:none}
.ha{position:absolute;left:0;top:0;opacity:0;will-change:transform;transition:opacity 1.4s var(--ease)}
.ha.show{opacity:var(--o)}
.ha.far .orb{filter:blur(1px)}
.ha-lbl{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:11.5px;color:#d6d4cc;padding:3px 10px 3px 8px;border-radius:20px;background:rgba(24,24,22,.78);border:1px solid var(--line)}
.ha-lbl i{width:5px;height:5px;border-radius:50%;background:#75736c}
.ha-say{position:absolute;bottom:calc(100% + 14px);left:50%;white-space:nowrap;font-size:12px;padding:6px 11px;border-radius:11px 11px 11px 3px;background:#f5f3ec;color:#141413;box-shadow:0 10px 30px -8px rgba(0,0,0,.6);opacity:0;transform:translate(-20%,8px) scale(.92);transform-origin:0 100%;transition:opacity .35s,transform .45s var(--ease)}
.ha-say.on{opacity:1;transform:translate(-20%,0) scale(1)}
.ha-say b{font-weight:600;color:#016a71}

/* ---- Agent Room ---- */
.room{position:relative;z-index:2;width:min(1280px,calc(100% - 48px));margin-top:64px;border-radius:22px;
  background:linear-gradient(180deg,rgba(38,38,36,.94),rgba(24,24,23,.97));border:1px solid var(--line2);
  box-shadow:0 60px 140px -40px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.05);overflow:hidden}
.room::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--ang,0deg),transparent 0 70%,rgba(79,192,197,.55) 80%,rgba(250,249,245,.35) 86%,transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:border-run 8s linear infinite}
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes border-run{to{--ang:360deg}}
.room-head{display:flex;justify-content:space-between;align-items:center;gap:14px 24px;padding:14px 20px;border-bottom:1px solid var(--line);font-size:13px;flex-wrap:wrap}
.room-req{display:flex;align-items:center;min-width:0}
.room-req .lbl{color:var(--dim);margin-right:10px;white-space:nowrap}.room-req{align-items:flex-start}.room-req .live{margin-top:7px;flex:none}
.req-text{color:var(--text);transition:opacity .4s}
.room-meta{display:flex;align-items:center;gap:10px;color:var(--muted);font-variant-numeric:tabular-nums}
.room-meta b{color:var(--text);font-weight:500}
.sep{width:3px;height:3px;border-radius:50%;background:var(--dim)}
.room-scn{display:flex;gap:5px;margin-left:10px}
.room-scn button{width:20px;height:6px;border-radius:4px;background:var(--line2);transition:background .3s,width .3s}
.room-scn button[aria-selected=true]{background:var(--teal);width:30px}
.room-body{display:grid;grid-template-columns:1fr 1.12fr;height:380px;transition:opacity .4s}
.room-body.fade{opacity:0}
.room-graph{position:relative;border-right:1px solid var(--line);background:radial-gradient(circle at 50% 54%,rgba(79,192,197,.08),transparent 62%)}
.room-edges{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.g-ring{fill:none;stroke:rgba(250,249,245,.05);stroke-dasharray:2 6}
.edge{fill:none;stroke:rgba(250,249,245,.1);stroke-width:1;opacity:0;transition:stroke .6s,stroke-width .6s,opacity .8s}
.edge.seen{opacity:1}
.edge.hot{stroke:var(--k);stroke-width:1.7;filter:drop-shadow(0 0 5px var(--k))}
.pk-halo{opacity:.28}
.graph-cap{position:absolute;left:16px;top:13px;font-size:11.5px;color:var(--dim)}
.graph-legend{position:absolute;left:16px;bottom:12px;display:flex;gap:12px;font-size:10.5px;color:var(--dim)}
.graph-legend i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;background:var(--k);vertical-align:0}
.gn{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:7px;z-index:1;animation:gnIn .7s var(--ease) both;animation-delay:calc(var(--i)*.08s)}
.gn .orb{--s:46px}
.gn.hub .orb{--s:60px}
.gn small{font-size:11.5px;color:var(--muted);line-height:1;transition:color .3s}
.gn em{position:absolute;top:calc(100% + 2px);font-style:normal;font-size:10px;color:var(--teal);opacity:0;transition:opacity .3s;white-space:nowrap}
.gn.working small{color:var(--text)}
.gn.working em{opacity:1}
.gn em::after{content:'';animation:dots 1.2s steps(4) infinite}
@keyframes dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}
@keyframes gnIn{from{opacity:0;transform:translate(-50%,-50%) scale(.6)}}

.room-thread{position:relative;padding:12px 18px 14px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;
  -webkit-mask-image:linear-gradient(transparent,#000 26%);mask-image:linear-gradient(transparent,#000 26%)}
.tm{--k:var(--teal);flex-shrink:0;display:flex;gap:11px;align-items:flex-start;padding:9px 12px;margin-top:8px;border-radius:12px;background:rgba(250,249,245,.03);border:1px solid var(--line);animation:tmIn .55s var(--ease) both;overflow:hidden}
.tm .orb{--s:26px;margin-top:1px}
.tm>div{flex:1;min-width:0}
.tm-h{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.tm-h b{color:var(--text);font-weight:500}
.tm-h .to{color:var(--muted)}
.tm-h svg.arr{width:12px;height:12px;stroke:var(--dim);fill:none;stroke-width:1.6}
.kind{margin-left:auto;font-style:normal;font-size:10.5px;padding:1px 8px;border-radius:20px;color:#a8a69e;border:1px solid rgba(250,249,245,.14);white-space:nowrap}
.tm p{font-size:13.5px;line-height:1.45;color:#e8e6de;margin-top:3px}
.tm.k-critique{border-color:rgba(250,249,245,.22);background:rgba(250,249,245,.05)}.tm.k-critique .kind{color:#faf9f5;border-color:rgba(250,249,245,.4)}
.tm.k-agree{border-color:rgba(79,192,197,.3)}.tm.k-agree .kind,.tm-final .kind{color:#4fc0c5;border-color:rgba(79,192,197,.4)}
@keyframes tmIn{from{opacity:0;max-height:0;margin-top:0;padding-top:0;padding-bottom:0;transform:translateY(10px)}to{opacity:1;max-height:160px}}
.tm-vote .avs{display:flex}
.tm-vote .avs .orb{--s:24px;margin-left:-6px}
.tm-vote .avs .orb:first-child{margin-left:0}
.vbar{display:block;height:4px;border-radius:4px;background:var(--line);margin-top:8px;overflow:hidden}
.vbar s{display:block;height:100%;width:0;background:var(--teal);animation:vfill 1.1s .2s var(--ease) forwards}
@keyframes vfill{to{width:100%}}
.tm-human{--k:#faf9f5;border-style:dashed;border-color:rgba(250,249,245,.3);background:rgba(250,249,245,.03)}
.tm-human .hico{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:rgba(250,249,245,.08);color:#faf9f5;flex:none}
.hbtns{display:flex;gap:6px;margin-top:8px}
.hb{font-size:12px;padding:5px 12px;border-radius:8px;border:1px solid var(--line2);color:var(--muted);transition:all .25s}
.hb.ok{background:var(--text);color:#141413;border-color:var(--text)}
.hb.ok.pressed{transform:scale(.94);background:var(--teal);border-color:var(--teal)}
.tm-final{border-color:rgba(79,192,197,.4);background:rgba(79,192,197,.06)}

.room-board{display:flex;gap:8px;padding:12px 20px;border-top:1px solid var(--line);flex-wrap:wrap;min-height:60px;align-items:center}
.board-lbl{font-size:11.5px;color:var(--dim);margin-right:4px}
.tk{--c:#4fc0c5;position:relative;display:flex;align-items:center;gap:8px;padding:5px 11px 5px 5px;border-radius:10px;background:rgba(250,249,245,.03);border:1px solid var(--line);font-size:12px;overflow:hidden;animation:tkIn .55s var(--ease) both;transition:border-color .4s,background .4s}
.tk .orb{--s:20px}
.tk-id{font:500 10.5px var(--mono);color:var(--dim)}
.tk-s{font-size:10.5px;color:var(--dim);padding-left:2px}
.tk.doing{border-color:color-mix(in srgb,var(--c) 45%,transparent);background:color-mix(in srgb,var(--c) 6%,transparent)}
.tk.doing .tk-s{color:var(--c)}
.tk.doing::after{content:'';position:absolute;left:0;bottom:0;height:2px;width:40%;background:linear-gradient(90deg,transparent,var(--c),transparent);animation:shim 1.4s linear infinite}
.tk.redo{border-color:rgba(250,249,245,.35);background:rgba(250,249,245,.06);animation:shake .5s}
.tk.redo .tk-s{color:#faf9f5}
.tk.done .tk-s{color:#a8a69e}
.tk.done{opacity:.8}
@keyframes shim{from{transform:translateX(-100%)}to{transform:translateX(260%)}}
@keyframes tkIn{from{opacity:0;transform:translateY(8px) scale(.9)}}
@keyframes shake{20%,60%{transform:translateX(-3px)}40%,80%{transform:translateX(3px)}}

/* ---- responsive ---- */
@media (max-width:900px){
  .room-body{grid-template-columns:1fr;height:auto}
  .room-graph{height:300px;border-right:0;border-bottom:1px solid var(--line)}
  .room-thread{height:300px}
}
@media (max-width:720px){
  .hero{padding-top:118px}
  .hero h1 br{display:none}
  .hero h1{font-size:clamp(36px,10vw,46px);letter-spacing:-1.2px}
  .hero-agents{height:120px}
  .ha-lbl,.ha-say{display:none}
  .sigil{top:300px;opacity:.6}
  .room{width:calc(100% - 28px);margin-top:48px}
  .room-head{padding:12px 14px}
  .room-meta{width:100%;font-size:12px}
  .room-scn{margin-left:auto}
  .room-graph{height:270px}
  .gn .orb{--s:38px}.gn.hub .orb{--s:48px}
  .graph-legend{display:none}
  .room-thread{height:320px;padding:10px 12px}
  .tm p{font-size:13px}
  .room-board{padding:10px 14px}
}
@media (prefers-reduced-motion:reduce){.sigil,.aurora span{animation:none}}

/* Chữ gradient (background-clip:text) chỉ được tô trong hộp nội dung của inline:
   dấu tiếng Việt phía trên (ả, ộ, ũ) và phần nghiêng tràn ra hai bên bị cắt.
   Nới hộp nền bằng padding, bù lại bằng margin âm để không lệch bố cục. */
.hero h1 em{display:inline;padding:.16em .12em .1em;margin:0 -.12em;-webkit-box-decoration-break:clone;box-decoration-break:clone}