/* section01-a1: "01 — What I do" tech-powered-machine diagram (static; no animation) */
.dg{margin:64px 0 0;padding:48px 40px 40px;background:#04060B;border:1px solid #1E2640;border-radius:20px}
.dg-body{position:relative;max-width:960px;margin:0 auto;display:grid;grid-template-columns:190px minmax(0,1fr) 220px;align-items:stretch}
.dg-lines{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.dg-col{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.dg-lbl{margin:0 0 24px;font:500 14px/1.2 var(--body);color:var(--tx3);text-align:center;white-space:nowrap}
.dg-stack{list-style:none;margin:auto 0;padding:0;display:flex;flex-direction:column;gap:10px}
.dg-tile{width:190px;box-sizing:border-box;display:flex;align-items:center;gap:10px;padding:11px 14px;background:#080A13;border:1px solid rgba(245,241,232,.12);border-radius:10px;color:var(--tx);font:400 15px/1.3 var(--body);white-space:nowrap}
.dg-tile .dg-ic{flex:none;color:#8E9BC2}
.dg-out .dg-stack{gap:14px}
.dg-row{width:220px;box-sizing:border-box;display:flex;align-items:center;gap:12px;padding:13px 16px;background:rgba(63,169,201,.08);border:1px solid rgba(63,169,201,.30);border-radius:10px;color:var(--tx);font:500 15px/1.3 var(--body)}
.dg-row .dg-ck{flex:none;color:var(--ac)}
.dg-mid{justify-content:flex-start}
.dg-mid .dg-lbl{margin-bottom:0}
.dg-core{position:relative;width:150px;height:150px;display:grid;place-items:center;margin-top:auto}
.dg-ring{position:absolute;inset:0}
.dg-box{position:relative;width:88px;height:88px;box-sizing:border-box;border-radius:20px;background:#0A0D19;border:1px solid rgba(63,169,201,.75);box-shadow:0 0 22px rgba(34,195,230,.12);display:grid;place-items:center}
.dg-box img{width:40px;height:40px;display:block}
.dg-name{margin:16px 0 0;font:700 18px/1.3 var(--display);color:var(--tx);text-align:center}
.dg-sub{margin:4px 0 auto;font:400 14px/1.4 var(--body);color:var(--tx3);text-align:center}
.dg-vl{display:none}
.dg-cap{margin:40px 0 0;text-align:center;font:400 15px/1.5 var(--body);color:var(--tx3);text-wrap:balance}
@media (min-width:820px) and (max-width:1023.98px){.dg{padding:40px 24px 32px}}
@media (max-width:819.98px){
  .dg{padding:32px 16px 28px}
  .dg-lines{display:none}
  .dg-body{grid-template-columns:1fr;max-width:520px}
  .dg-lbl{margin-bottom:16px}
  .dg-stack{margin:0;width:100%}
  .dg-in .dg-stack{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .dg-tile{width:auto;min-width:0;padding:10px 10px;gap:8px;font-size:14px}
  .dg-tile .dg-ic{width:16px;height:16px}
  .dg-vl{display:block;margin:16px auto}
  .dg-mid .dg-lbl{display:none}
  .dg-core{margin-top:0}
  .dg-sub{margin-bottom:0}
  .dg-out .dg-stack{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:8px}
  .dg-row{width:auto;min-width:0;padding:10px 10px;gap:8px;font-size:14px;text-wrap:balance}
  .dg-row .dg-ck{width:18px;height:18px}
  .dg-cap{margin-top:28px}
}
/* name + subline sit on a panel-coloured backing so connector lines pass cleanly behind the text at narrow desktop widths */
.dg-name,.dg-sub{position:relative;z-index:2;background:#04060B;padding-left:8px;padding-right:8px;border-radius:4px}
.dg-sub{padding-bottom:2px}