/* Home workflow + Hangeon Board spotlight. Scoped to landing page only. */
.workflow-story{
  position:relative;
  padding:108px 0 112px;
  overflow:hidden;
  background:
    radial-gradient(circle at 8% 6%,rgba(8,104,247,.10),transparent 24%),
    radial-gradient(circle at 92% 88%,rgba(18,177,143,.09),transparent 26%),
    #f8fbff;
  border-top:1px solid rgba(220,230,243,.85);
  border-bottom:1px solid rgba(220,230,243,.85);
}
.workflow-story:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle,rgba(58,83,122,.16) 1px,transparent 1.2px);
  background-size:28px 28px;
  mask-image:linear-gradient(to bottom,transparent,rgba(0,0,0,.6) 18%,rgba(0,0,0,.45) 80%,transparent);
  opacity:.32;
}
.workflow-head{position:relative;z-index:1;max-width:840px;margin-bottom:58px}
.workflow-head p{max-width:760px;margin:0 auto}
.workflow-map{
  --flow-line:#a8c4f6;
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:18px;
  padding:22px;
  border-radius:34px;
  border:1px solid rgba(126,153,194,.27);
  background:rgba(255,255,255,.72);
  box-shadow:0 30px 80px rgba(35,83,153,.10);
  backdrop-filter:blur(18px);
}
.workflow-track{position:absolute;left:7%;right:7%;top:58px;height:2px;z-index:0}
.workflow-track:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,104,247,.12),rgba(8,104,247,.58),rgba(18,177,143,.42));border-radius:99px}
.workflow-track i{position:absolute;left:17%;right:12%;top:-4px;height:10px;background:radial-gradient(circle,#fff 0 2px,#80a8ed 3px 4px,transparent 5px);background-size:26px 10px;opacity:.85}
.workflow-node{
  position:relative;z-index:2;min-width:0;
  display:flex;flex-direction:column;gap:14px;
  padding:20px;
  border:1px solid rgba(190,205,229,.78);
  border-radius:24px;
  background:rgba(255,255,255,.96);
  box-shadow:0 12px 34px rgba(35,73,135,.08);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.workflow-node:hover{transform:translateY(-4px);box-shadow:0 20px 48px rgba(35,73,135,.13);border-color:rgba(8,104,247,.30)}
.node-capture{grid-column:span 3}
.node-project{grid-column:span 3}
.node-calendar{grid-column:span 3}
.node-execute{grid-column:span 3}
.node-board{grid-column:2 / span 10;margin-top:6px;padding:24px;background:linear-gradient(145deg,#f3f6ff,#eefbf8);border-color:rgba(8,104,247,.2)}
.workflow-number{
  width:40px;height:40px;display:grid;place-items:center;
  border-radius:13px;background:#edf4ff;color:var(--blue);
  font-weight:900;font-size:12px;letter-spacing:.05em;
  box-shadow:inset 0 0 0 1px rgba(8,104,247,.08);
}
.node-board .workflow-number{background:linear-gradient(145deg,#0868f7,#2e80ff);color:#fff}
.workflow-node-copy>span{display:block;margin-bottom:4px;color:#7a8aa4;font-size:11px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}
.workflow-node-copy h3{margin:0 0 7px;color:var(--navy);font-size:20px;letter-spacing:-.045em;line-height:1.28}
.workflow-node-copy p{margin:0;color:var(--muted);font-size:13px;line-height:1.65}
.workflow-mini{
  margin-top:auto;min-height:156px;padding:15px;border-radius:17px;
  border:1px solid #e3eaf5;background:#f9fbff;overflow:hidden;
}
.mini-top{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;color:var(--navy)}
.mini-top i{width:9px;height:9px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 5px rgba(8,104,247,.09)}
.mini-top b{font-size:13px}.mini-top span{font-size:10px;color:#8a98ad}
.mini-line{height:8px;border-radius:99px;background:#e5edf8;margin-top:11px;width:66%}.mini-line.long{width:92%;margin-top:17px}
.mini-chip{display:inline-flex;margin-top:16px;padding:6px 8px;border-radius:8px;background:#e8f2ff;color:#0a5acf;font-weight:800;font-size:10px}
.mini-project{background:linear-gradient(160deg,#fbfcff,#f2f8ff)}
.mini-project-title{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px}
.mini-project-title i{width:25px;height:25px;border-radius:8px;background:linear-gradient(145deg,#12b18f,#2bc9aa)}
.mini-project-title b{font-size:12px;color:var(--navy)}.mini-project-title span{font-size:11px;font-weight:900;color:var(--blue)}
.mini-progress{height:6px;border-radius:99px;background:#e4ecf7;margin:14px 0}.mini-progress i{display:block;width:68%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#0868f7,#12b18f)}
.mini-project-row{display:flex;justify-content:space-between;gap:8px;padding:8px 9px;margin-top:7px;border-radius:10px;background:#fff;border:1px solid #e7edf5;font-size:10px;color:#687b98}.mini-project-row b{font-size:9px;color:#7586a0}.mini-project-row.active{background:#eef5ff;color:#143965}.mini-project-row.active b{color:#0c69ed}
.mini-calendar{display:grid;grid-template-columns:72px 1fr;gap:7px;align-content:start;background:#fbfcff}
.calendar-head{grid-row:1/4;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:13px;background:#fff;border:1px solid #e3eaf4;min-height:124px}.calendar-head b{font-size:9px;color:#8695aa;letter-spacing:.12em}.calendar-head span{font-size:34px;line-height:1.05;font-weight:900;color:var(--navy)}.calendar-head small{font-size:9px;color:#92a0b3}
.calendar-event{display:flex;align-items:center;padding:8px 9px;border-radius:9px;font-size:9px;font-weight:800}.calendar-event.teal{background:#e7faf5;color:#137b68}.calendar-event.blue{background:#e8f1ff;color:#155cc0}.calendar-event.soft{background:#f2f4f8;color:#6b7890}
.mini-execute{display:grid;grid-template-columns:64px 1fr;align-items:center;gap:12px;background:#fbfffd}.execute-ring{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#12b18f 0 75%,#e2ebe8 75%);position:relative}.execute-ring:after{content:"";position:absolute;inset:7px;border-radius:50%;background:#fff}.execute-ring span{position:relative;z-index:1;color:#08745f;font-weight:900;font-size:11px}.mini-execute>div:last-child>b{display:block;font-size:11px;color:var(--navy);margin-bottom:5px}.mini-execute label{display:flex;align-items:center;gap:5px;font-size:9px;color:#677890;margin-top:5px}.mini-execute label i{width:13px;height:13px;border-radius:4px;border:1px solid #bdc8d7;display:grid;place-items:center;font-style:normal;font-size:9px}.mini-execute label i:not(:empty){border-color:#12b18f;background:#12b18f;color:#fff}
.workflow-board-mini{margin-top:2px;border:1px solid rgba(141,165,199,.34);border-radius:20px;background:#f1f1f7;overflow:hidden;box-shadow:0 18px 42px rgba(45,65,100,.09)}
.board-mini-header{height:42px;display:flex;align-items:center;gap:9px;padding:0 14px;background:#fff;border-bottom:1px solid #e3e7ef}.board-mini-header span{width:14px;height:14px;border-radius:4px;background:linear-gradient(135deg,#246de8 0 42%,#83aaf4 42% 100%)}.board-mini-header b{font-size:12px;color:#14223b}.board-mini-header i{margin-left:auto;font-style:normal;color:#8c97a9;letter-spacing:.08em}
.board-mini-canvas{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:13px;align-items:center;padding:18px;min-height:205px;background-image:radial-gradient(circle,rgba(116,126,150,.20) 1px,transparent 1px);background-size:22px 22px}
.board-mini-col{align-self:stretch;padding:12px;border-radius:14px;border:1px solid rgba(120,140,170,.14);display:flex;flex-direction:column;gap:7px;box-shadow:0 7px 18px rgba(50,60,90,.06)}.board-mini-col strong{font-size:11px;color:#172640}.board-mini-col em{font-style:normal;font-size:8px;color:#8b97a8;margin-top:-5px}.board-mini-col div{padding:8px;border-radius:9px;background:rgba(255,255,255,.88);font-size:9px;color:#45566f}.board-mini-col.col-a{background:#eaf7f3}.board-mini-col.col-b{background:#f8eee9}.board-mini-col.col-c{background:#edf2ff}.board-mini-col .note{background:#fff1ad;color:#5b4a1a}.image-placeholder{height:58px!important;background:linear-gradient(155deg,#cad7c9,#f1e8d7)!important;position:relative;overflow:hidden}.image-placeholder:before{content:"";position:absolute;left:40%;bottom:-14px;width:28px;height:68px;border-radius:50% 50% 12px 12px;background:#6e8e72;transform:rotate(8deg);opacity:.65}
.board-mini-link{color:#71809a;font-weight:800;font-size:20px}
.workflow-foot{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:20px;padding:18px 22px;border-radius:18px;background:#0d1f3d;color:#d7e4fb}.workflow-foot span{font-size:14px}.workflow-foot a{flex:0 0 auto;color:#fff;font-weight:900;font-size:13px}

.board-spotlight{position:relative;overflow:hidden;padding:116px 0 96px;background:#0d1118;color:#fff}
.board-spotlight:before{content:"";position:absolute;width:760px;height:760px;right:-220px;top:-260px;border-radius:50%;background:radial-gradient(circle,rgba(44,103,228,.28),transparent 65%)}
.board-spotlight:after{content:"";position:absolute;width:560px;height:560px;left:-240px;bottom:-270px;border-radius:50%;background:radial-gradient(circle,rgba(18,177,143,.13),transparent 68%)}
.board-spotlight-grid{position:relative;z-index:1;display:grid;grid-template-columns:.82fr 1.18fr;gap:72px;align-items:center}
.board-spotlight .section-kicker{color:#7aa9ff}.board-spotlight h2{font-size:clamp(38px,5vw,62px);line-height:1.08;letter-spacing:-.065em;margin:12px 0 22px;color:#fff}.board-lead{font-size:17px;line-height:1.75;color:#afbbcf;margin:0;max-width:570px}
.board-feature-list{display:grid;gap:11px;margin:31px 0 27px}.board-feature-list article{display:grid;grid-template-columns:42px 1fr;gap:13px;align-items:start;padding:14px 15px;border:1px solid rgba(255,255,255,.09);border-radius:15px;background:rgba(255,255,255,.04)}.board-feature-list article>i{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#18243a;color:#70a2ff;font-style:normal;font-size:17px}.board-feature-list b{display:block;margin:1px 0 2px;font-size:14px}.board-feature-list span{display:block;color:#96a5ba;font-size:12px;line-height:1.55}
.board-spotlight-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.board-spotlight-actions span{color:#7f8ea5;font-size:12px}.board-spotlight .btn-primary{box-shadow:0 12px 34px rgba(8,104,247,.30)}
.board-showcase{position:relative;min-height:590px;perspective:1400px}.board-showcase-glow{position:absolute;inset:14% 4% 6% 10%;border-radius:50%;background:radial-gradient(circle,rgba(48,100,208,.26),transparent 67%);filter:blur(18px)}
.board-shot{position:absolute;margin:0;border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.13);background:#15191f;box-shadow:0 38px 90px rgba(0,0,0,.44)}.board-shot img{width:100%;height:auto}.board-shot-main{left:0;top:58px;width:88%;transform:rotateY(-7deg) rotateX(1deg)}.board-shot-float{right:-1%;bottom:5px;width:53%;transform:rotateY(7deg) rotateZ(1.2deg);box-shadow:0 28px 70px rgba(0,0,0,.48)}.board-shot figcaption{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:11px 14px;background:#12161c;border-top:1px solid rgba(255,255,255,.07)}.board-shot figcaption b{font-size:11px}.board-shot figcaption span{color:#77859a;font-size:9px}.board-showcase-label{position:absolute;top:12px;left:8%;display:flex;align-items:center;gap:10px;padding:10px 13px;border-radius:14px;background:rgba(20,27,40,.88);border:1px solid rgba(255,255,255,.10);backdrop-filter:blur(14px);box-shadow:0 15px 40px rgba(0,0,0,.22)}.board-showcase-label i{width:13px;height:13px;border-radius:4px;background:#2d77ed;box-shadow:8px 0 0 #78a5ef}.board-showcase-label b{display:block;font-size:11px}.board-showcase-label small{display:block;color:#7f8ba0;font-size:9px;margin-top:1px}
.board-scenario{position:relative;z-index:1;margin-top:74px;padding:24px;border-radius:24px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.045)}.scenario-copy{display:flex;align-items:end;justify-content:space-between;gap:20px;padding:0 4px 18px}.scenario-copy span{color:#7d8aa0;font-size:11px;font-weight:900;letter-spacing:.07em;text-transform:uppercase}.scenario-copy h3{margin:0;color:#fff;font-size:21px;letter-spacing:-.04em}.scenario-rail{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1.15fr auto 1fr;align-items:stretch;gap:10px}.scenario-rail>div{min-width:0;padding:15px;border-radius:15px;background:#151b25;border:1px solid rgba(255,255,255,.08)}.scenario-rail>div.accent{background:linear-gradient(145deg,#153463,#132945);border-color:rgba(84,137,238,.38)}.scenario-rail i{display:inline-grid;width:23px;height:23px;place-items:center;border-radius:8px;background:#222c3c;color:#8fa4c3;font-style:normal;font-size:9px;font-weight:900}.scenario-rail .accent i{background:#2c75ec;color:#fff}.scenario-rail b{display:block;margin:10px 0 3px;font-size:12px;color:#f2f6ff}.scenario-rail span{display:block;color:#78879d;font-size:10px}.scenario-rail>em{display:grid;place-items:center;color:#526174;font-style:normal;font-size:16px}

@media (max-width:1050px){
  .workflow-map{grid-template-columns:repeat(6,minmax(0,1fr))}.workflow-track{display:none}
  .node-capture,.node-project,.node-calendar,.node-execute{grid-column:span 3}.node-board{grid-column:1/-1;margin-top:0}
  .board-spotlight-grid{grid-template-columns:1fr;gap:54px}.board-spotlight-copy{max-width:760px}.board-showcase{min-height:620px;max-width:900px;width:100%;margin:0 auto}.board-shot-main{width:84%}.board-shot-float{width:50%}
  .scenario-rail{grid-template-columns:1fr 1fr 1fr}.scenario-rail>em{display:none}.scenario-rail>div{min-height:96px}.scenario-rail>div.accent{grid-column:span 2}
}
@media (max-width:720px){
  .workflow-story{padding:78px 0 82px}.workflow-head{margin-bottom:34px}.workflow-map{display:block;padding:14px;border-radius:26px;background:rgba(255,255,255,.8)}
  .workflow-node{margin:0 0 14px;padding:18px;border-radius:20px}.workflow-node:last-child{margin-bottom:0}.node-board{margin:0 0 14px}.workflow-number{position:absolute;top:16px;right:16px;width:35px;height:35px}.workflow-node-copy{padding-right:45px}.workflow-node-copy h3{font-size:19px}.workflow-mini{min-height:auto}.workflow-board-mini{margin-top:2px}.board-mini-canvas{grid-template-columns:1fr;gap:9px;min-height:0}.board-mini-link{display:none}.board-mini-col{min-height:105px}.board-mini-col.col-b .image-placeholder{height:82px!important}.workflow-foot{display:block;padding:17px}.workflow-foot a{display:inline-block;margin-top:8px}
  .board-spotlight{padding:86px 0 74px}.board-spotlight-grid{gap:42px}.board-spotlight h2{font-size:40px}.board-lead{font-size:15px}.board-feature-list article{grid-template-columns:38px 1fr;padding:12px}.board-feature-list article>i{width:38px;height:38px}
  .board-showcase{min-height:430px}.board-shot-main{left:0;top:48px;width:96%;transform:none}.board-shot-float{right:-2%;bottom:0;width:60%;transform:rotate(1.5deg)}.board-shot figcaption{padding:9px 10px}.board-shot figcaption span{display:none}.board-showcase-label{left:2%;top:0}.board-scenario{margin-top:42px;padding:17px}.scenario-copy{display:block}.scenario-copy h3{margin-top:5px;font-size:19px}.scenario-rail{grid-template-columns:1fr 1fr;gap:8px}.scenario-rail>div.accent{grid-column:auto}.scenario-rail>div{padding:12px;min-height:92px}
}
@media (max-width:480px){
  .workflow-story .container,.board-spotlight .container{width:min(var(--max),calc(100% - 28px))}.workflow-map{padding:10px}.workflow-node{padding:16px}.workflow-node-copy p{font-size:12px}.workflow-mini{padding:12px}.workflow-board-mini{border-radius:16px}.board-mini-header{height:38px}.board-mini-canvas{padding:11px}
  .board-spotlight{padding-top:74px}.board-spotlight h2{font-size:35px}.board-feature-list{margin-top:24px}.board-spotlight-actions .btn{width:100%}.board-spotlight-actions span{width:100%;text-align:center}.board-showcase{min-height:355px}.board-shot-main{top:42px}.board-shot-float{width:63%}.board-showcase-label{transform:scale(.92);transform-origin:left top}.board-scenario{padding:14px}.scenario-rail{grid-template-columns:1fr}.scenario-rail>div{min-height:0}.scenario-rail>div.accent{grid-column:auto}
}