/* ===== RESET & BASE ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg-0:#050810; --bg-1:#0a0f1c; --bg-2:#0f1626; --bg-3:#141d30;
  --panel:rgba(15,22,38,0.85); --panel-border:rgba(0,224,255,0.15);
  --accent:#00e0ff; --accent-dim:#00a0c0; --accent-glow:rgba(0,224,255,0.3);
  --accent-warm:#ff6b35; --accent-warm-glow:rgba(255,107,53,0.3);
  --text:#e0e8f0; --text-dim:#8a9bb0; --text-muted:#50647a;
  --mono:'JetBrains Mono',monospace; --sans:'Inter',sans-serif;
  --radius:4px;
}
html,body{height:100%;overflow:hidden}
body{background:var(--bg-0);color:var(--text);font-family:var(--sans);font-size:14px;line-height:1.6}

/* ===== CITYSCAPE BACKGROUND (from avatar V7) ===== */
.cityscape-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.cityscape-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 60%;
  filter:blur(3px) brightness(0.4) saturate(0.85);transform:scale(1.05)}
.cityscape-overlay{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(5,8,16,0.5) 0%,rgba(5,8,16,0.3) 30%,rgba(5,8,16,0.6) 100%),
  linear-gradient(90deg,rgba(5,8,16,0.6) 0%,rgba(5,8,16,0.2) 25%,rgba(5,8,16,0.2) 75%,rgba(5,8,16,0.6) 100%)}
.hud-grid{position:absolute;inset:0;background-image:
  linear-gradient(rgba(0,224,255,0.03) 1px,transparent 1px),
  linear-gradient(90deg,rgba(0,224,255,0.03) 1px,transparent 1px);
  background-size:40px 40px}
.hud-scanline{position:absolute;inset:0;background:linear-gradient(180deg,transparent 0%,rgba(0,224,255,0.02) 50%,transparent 100%);
  background-size:100% 4px;animation:scan 8s linear infinite}
@keyframes scan{0%{background-position:0 0}100%{background-position:0 100vh}}
.hud-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 0%,rgba(0,0,0,0.5) 100%)}

/* ===== STATUS BAR ===== */
.status-bar{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;
  padding:6px 24px;background:rgba(5,8,16,0.9);border-bottom:1px solid var(--panel-border);font-family:var(--mono);font-size:11px}
.status-left,.status-right{display:flex;align-items:center;gap:8px;color:var(--text-dim)}
.status-dot{width:6px;height:6px;border-radius:50%;background:#00ff88;box-shadow:0 0 6px #00ff88;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}
.status-text{letter-spacing:0.1em}
.status-mono{color:var(--accent)}
.status-sep{color:var(--text-muted)}

/* ===== MAIN HUB LAYOUT ===== */
.hub{position:relative;z-index:1;display:grid;grid-template-columns:410px 1fr 340px;gap:20px;
  padding:50px 24px 40px;height:100vh;max-width:1600px;margin:0 auto}

/* ===== LEFT PANEL ===== */
.panel-left{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);padding:24px 20px;
  display:flex;flex-direction:column;backdrop-filter:blur(10px);position:relative}
.panel-left::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0.5}
.left-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}
.left-id .left-label{font-family:var(--mono);font-size:9px;color:var(--text-muted);letter-spacing:0.15em}
.left-id .left-value{font-family:var(--mono);font-size:13px;color:var(--accent);font-weight:600}
.left-badge{display:flex;align-items:center;gap:4px;padding:3px 8px;border:1px solid #00ff88;border-radius:2px}
.badge-dot{width:5px;height:5px;border-radius:50%;background:#00ff88;box-shadow:0 0 4px #00ff88}
.badge-text{font-family:var(--mono);font-size:9px;color:#00ff88;letter-spacing:0.1em}
.left-name{font-size:30px;font-weight:800;letter-spacing:0.05em;line-height:1;margin-bottom:14px}
.left-tagline{font-size:14px;color:var(--text-dim);font-weight:500;margin-bottom:4px;line-height:1.35}
.left-divider{height:1px;background:linear-gradient(90deg,var(--accent-dim),transparent);margin:4px 0;opacity:0.3}
.left-bio{font-size:13px;color:var(--text-dim);line-height:1.48;margin-bottom:16px}
.left-stats{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:4px}
.stat-item{background:rgba(0,224,255,0.05);border:1px solid rgba(0,224,255,0.1);border-radius:2px;padding:6px 10px}
.stat-value{font-family:var(--mono);font-size:20px;font-weight:700;color:var(--accent);line-height:1}
.stat-value span{font-size:13px;color:var(--accent-dim)}
.stat-label{font-size:9px;color:var(--text-muted);letter-spacing:0.08em;text-transform:uppercase;margin-top:3px}
.scope-note{font-size:11px;line-height:1.32;color:var(--text-muted);margin:0}
.left-quote{margin:56px 0 0;padding:6px 0;position:relative}
.quote-mark{font-family:serif;font-size:22px;color:var(--accent);opacity:0.4;line-height:0.5}
.quote-mark.end{text-align:right}
.quote-text{font-size:11px;font-style:italic;color:var(--text);line-height:1.35;padding:0 4px}
@media (max-height:650px){.left-quote{display:none}.left-bio{margin-bottom:4px}}
.left-footer{margin-top:auto;padding-top:12px}
.footer-label{font-family:var(--mono);font-size:9px;color:var(--text-muted);letter-spacing:0.15em;margin-bottom:4px}
.footer-value{font-family:var(--mono);font-size:11px;color:var(--text-dim)}

/* ===== CENTER: AVATAR ===== */
.panel-center{display:flex;align-items:center;justify-content:center;position:relative}
.avatar-stage{position:relative;width:100%;max-width:400px;aspect-ratio:3/4.5;display:flex;align-items:center;justify-content:center}
.corner{position:absolute;width:24px;height:24px;border:2px solid var(--accent);opacity:0.6}
.corner.tl{top:0;left:0;border-right:none;border-bottom:none}
.corner.tr{top:0;right:0;border-left:none;border-bottom:none}
.corner.bl{bottom:0;left:0;border-right:none;border-top:none}
.corner.br{bottom:0;right:0;border-left:none;border-top:none}
.avatar-frame{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:2px}
.avatar-ring{position:absolute;width:280px;height:280px;border:1px solid var(--accent-glow);border-radius:50%;animation:spin 20s linear infinite;opacity:0.3}
.avatar-ring.inner{width:240px;height:240px;border:1px dashed var(--accent-glow);animation:spin 15s linear infinite reverse;opacity:0.2}
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
.avatar-img{max-width:100%;max-height:100%;object-fit:contain;border-radius:2px;filter:contrast(1.05) saturate(1.1);
  clip-path:polygon(0% 2%,2% 0%,98% 0%,100% 2%,100% 98%,98% 100%,2% 100%,0% 98%)}
.avatar-glow{position:absolute;inset:0;background:radial-gradient(circle at center,rgba(0,224,255,0.08) 0%,transparent 60%);pointer-events:none}
.avatar-label{position:absolute;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:10px;letter-spacing:0.15em;color:var(--accent);opacity:0.7;white-space:nowrap}
.avatar-label.top{top:-20px}
.avatar-label.bottom{bottom:-20px}
.label-bracket{color:var(--accent-dim)}
.tick-mark{position:absolute;width:12px;height:1px;background:var(--accent);opacity:0.4}
.tick-mark.top-left{top:30px;left:-6px}.tick-mark.top-right{top:30px;right:-6px}
.tick-mark.bottom-left{bottom:30px;left:-6px}.tick-mark.bottom-right{bottom:30px;right:-6px}

/* ===== RIGHT PANEL: ICONS ===== */
.panel-right{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);padding:24px 20px;
  display:flex;flex-direction:column;backdrop-filter:blur(10px);position:relative;overflow-y:auto}
.panel-right::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent-warm),transparent);opacity:0.5}
.right-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--panel-border)}
.right-label{font-family:var(--mono);font-size:10px;color:var(--text-muted);letter-spacing:0.15em}
.right-count{font-family:var(--mono);font-size:24px;color:var(--accent);font-weight:700}
.icon-grid{display:flex;flex-direction:column;gap:12px;flex:1}
.tech-icon{background:rgba(0,224,255,0.03);border:1px solid var(--panel-border);border-radius:var(--radius);padding:14px;
  cursor:pointer;display:flex;align-items:center;gap:14px;text-align:left;color:var(--text);font-family:var(--sans);
  transition:all 0.25s ease;position:relative;overflow:hidden}
.tech-icon::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(0,224,255,0.08),transparent);transition:left 0.5s ease}
.tech-icon:hover{border-color:var(--accent);background:rgba(0,224,255,0.08);transform:translateX(-3px);box-shadow:-4px 0 12px rgba(0,224,255,0.15)}
.tech-icon:hover::after{left:100%}
.tech-icon:hover .icon-frame{border-color:var(--accent);color:var(--accent)}
.tech-icon:hover .icon-label{color:var(--accent)}
.icon-frame{width:48px;height:48px;border:1px solid var(--panel-border);border-radius:2px;display:flex;align-items:center;justify-content:center;
  color:var(--text-dim);transition:all 0.25s ease;position:relative;flex-shrink:0;background:rgba(0,0,0,0.3)}
.icon-corner{position:absolute;width:6px;height:6px;border:1px solid var(--accent);opacity:0.5}
.icon-corner.tl{top:-1px;left:-1px;border-right:none;border-bottom:none}
.icon-corner.tr{top:-1px;right:-1px;border-left:none;border-bottom:none}
.icon-corner.bl{bottom:-1px;left:-1px;border-right:none;border-top:none}
.icon-corner.br{bottom:-1px;right:-1px;border-left:none;border-top:none}
.icon-svg{width:28px;height:28px}
.icon-label{font-size:15px;font-weight:700;color:var(--text);transition:color 0.25s;margin-top:2px}
.icon-sublabel{font-family:var(--mono);font-size:9px;color:var(--text-muted);letter-spacing:0.1em;margin-top:1px}
.icon-desc{font-size:11px;color:var(--text-dim);margin-top:4px;line-height:1.4}
.right-footer{margin-top:12px;padding-top:10px;border-top:1px solid var(--panel-border)}
.footer-hint{font-family:var(--mono);font-size:9px;color:var(--text-muted);letter-spacing:0.1em;text-align:center}

/* ===== BOTTOM BAR ===== */
.bottom-bar{position:fixed;bottom:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;
  padding:6px 24px;background:rgba(5,8,16,0.9);border-top:1px solid var(--panel-border);font-family:var(--mono);font-size:11px;color:var(--text-dim)}
.bottom-mono{color:var(--accent)}
.bottom-sep{color:var(--text-muted)}
.bottom-text{color:var(--text-dim)}

/* ===== SUBPAGE OVERLAYS ===== */
.subpage{position:fixed;inset:0;z-index:200;background:var(--bg-0);display:none;overflow-y:auto;
  opacity:0;transition:opacity 0.4s ease}
.subpage.active{display:block;opacity:1}
.subpage-inner{max-width:900px;margin:0 auto;padding:60px 40px 40px;position:relative}
.subpage-back{position:fixed;top:16px;right:24px;z-index:210;display:flex;align-items:center;gap:6px;
  background:rgba(0,224,255,0.1);border:1px solid var(--accent);color:var(--accent);padding:8px 16px;
  border-radius:2px;cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:0.1em;
  transition:all 0.25s ease}
.subpage-back:hover{background:var(--accent);color:var(--bg-0);box-shadow:0 0 16px var(--accent-glow)}
.subpage-back svg{width:16px;height:16px}
.subpage-header{display:flex;align-items:baseline;gap:16px;margin-bottom:32px;padding-bottom:16px;border-bottom:1px solid var(--panel-border)}
.subpage-number{font-family:var(--mono);font-size:48px;font-weight:700;color:var(--accent);line-height:1;opacity:0.4}
.subpage-title-main{font-family:var(--sans);font-size:24px;font-weight:700;color:var(--text);letter-spacing:0.05em}
.subpage-title-sub{font-family:var(--mono);font-size:11px;color:var(--text-muted);letter-spacing:0.1em;margin-left:auto;text-align:right}
.subpage-content{padding-bottom:40px}
.subpage-intro{font-size:15px;color:var(--text-dim);line-height:1.7;margin-bottom:28px;max-width:700px}
.leadership-proof{margin:-4px 0 30px}.leadership-proof-heading{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--accent);margin-bottom:12px}.leadership-proof-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.leadership-proof-card{min-height:112px;padding:16px;background:rgba(0,224,255,.035);border:1px solid var(--panel-border);border-radius:var(--radius);transition:all .25s ease}.leadership-proof-card:hover{border-color:var(--accent);box-shadow:0 0 16px var(--accent-glow)}.leadership-proof-label{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.14em;color:var(--accent);margin-bottom:10px}.leadership-proof-text{font-size:13px;line-height:1.55;color:var(--text-dim)}
.subpage-section-title{font-size:18px;font-weight:600;color:var(--accent);margin:32px 0 16px;
  padding-bottom:8px;border-bottom:1px solid var(--panel-border)}

/* ===== EDUCATION TIMELINE ===== */
.edu-timeline{display:flex;flex-direction:column;gap:16px}
.edu-item{display:flex;gap:20px;align-items:flex-start}
.edu-period{font-family:var(--mono);font-size:13px;color:var(--accent);min-width:100px;text-align:right;padding-top:2px}
.edu-card{flex:1;background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);padding:16px 20px}
.edu-institution{font-size:16px;font-weight:600;color:var(--text);margin-bottom:4px}
.edu-field{font-size:13px;color:var(--accent);margin-bottom:8px}
.edu-detail{font-size:13px;color:var(--text-dim);line-height:1.6}

/* ===== INTEREST GRID ===== */
.interest-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.interest-item{display:flex;gap:12px;align-items:flex-start;background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);padding:14px 16px}
.interest-icon{font-size:24px;line-height:1}
.interest-text h4{font-size:14px;font-weight:600;color:var(--text);margin-bottom:4px}
.interest-text p{font-size:12px;color:var(--text-dim);line-height:1.5}

/* ===== SKILL MAP (Obsidian-style) ===== */
.skill-map-container{margin:24px 0;padding:20px;background:rgba(5,8,16,0.6);border:1px solid var(--panel-border);border-radius:var(--radius);overflow-x:auto}
.skill-map-svg{width:100%;max-width:900px;height:auto;display:block;margin:0 auto}
.skill-map-legend{display:flex;gap:24px;flex-wrap:wrap;margin-top:16px;padding-top:12px;border-top:1px solid var(--panel-border)}
.legend-item{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-dim);font-family:var(--mono)}
.legend-dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.legend-dot.cyan{background:#00e0ff;box-shadow:0 0 6px rgba(0,224,255,0.5)}
.legend-dot.warm{background:#ff6b35;box-shadow:0 0 6px rgba(255,107,53,0.5)}
.legend-dot.white{background:#ffffff;box-shadow:0 0 6px rgba(255,255,255,0.5)}
.legend-dot.green{background:#7ec850;box-shadow:0 0 6px rgba(126,200,80,0.5)}
.legend-line{width:24px;height:2px;background:#00e0ff;opacity:0.5;display:inline-block}

/* ===== PHILOSOPHY QUOTE ===== */
.philosophy-quote{margin:24px 0;padding:20px 24px;background:rgba(0,224,255,0.04);border-left:2px solid var(--accent);border-radius:0 var(--radius) var(--radius) 0}
.philosophy-quote .quote-mark{font-size:32px}
.quote-text{font-size:15px;font-style:italic;color:var(--text);line-height:1.6;padding:4px 0}
.quote-author{font-size:12px;color:var(--text-dim);margin-top:8px}

/* ===== TECH TIMELINE ===== */
.tech-timeline{display:flex;flex-direction:column;gap:8px}
.tech-item{display:flex;align-items:center;gap:16px;padding:8px 16px;background:var(--panel);border:1px solid var(--panel-border);border-radius:2px;transition:all 0.25s ease}
.tech-item:hover{border-color:var(--accent);transform:translateX(4px)}
.tech-year{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--accent);min-width:60px}
.tech-name{font-size:13px;color:var(--text)}

/* ===== CAREER TIMELINE ===== */
.leadership-cases{margin:-4px 0 30px}.leadership-cases-heading{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--accent);margin-bottom:12px}.leadership-cases-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.leadership-case{padding:16px;background:rgba(0,224,255,.035);border:1px solid var(--panel-border);border-radius:var(--radius)}.leadership-case h3{margin:0 0 10px;font-size:14px;line-height:1.35;color:var(--text)}.leadership-case p{margin:0;font-size:12px;line-height:1.55;color:var(--text-dim)}
.career-timeline{position:relative;padding-left:24px}
.career-timeline::before{content:'';position:absolute;left:6px;top:0;bottom:0;width:1px;background:linear-gradient(180deg,var(--accent),var(--accent-dim),transparent)}
.career-item{position:relative;margin-bottom:20px}
.career-dot{position:absolute;left:-24px;top:6px;width:11px;height:11px;border-radius:50%;background:var(--bg-0);border:2px solid var(--accent);box-shadow:0 0 8px var(--accent-glow)}
.career-period{font-family:var(--mono);font-size:12px;color:var(--accent);margin-bottom:2px}
.career-company{font-size:16px;font-weight:700;color:var(--text);margin-bottom:2px}
.career-role{font-size:13px;color:var(--text-dim);margin-bottom:6px;font-style:italic}
.career-achievement{font-size:13px;color:var(--text-dim);line-height:1.6}

/* ===== AGENTS GRID ===== */
.agents-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:28px}
.agent-card{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);padding:16px;transition:all 0.25s ease}
.agent-card:hover{border-color:var(--accent);box-shadow:0 0 16px var(--accent-glow)}
.agent-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.agent-icon{font-size:20px}
.agent-name{font-size:15px;font-weight:700;color:var(--text)}
.agent-tag{font-family:var(--mono);font-size:9px;color:var(--accent);letter-spacing:0.1em;margin-left:auto;
  padding:2px 8px;border:1px solid var(--accent-dim);border-radius:2px}
.agent-desc{font-size:12px;color:var(--text-dim);line-height:1.6;margin-bottom:10px}
.agent-status{font-family:var(--mono);font-size:10px;color:#00ff88;letter-spacing:0.1em;display:flex;align-items:center;gap:6px}
.agent-status .status-dot{width:5px;height:5px}

.relationship-context{margin:-14px 0 20px;padding:10px 12px;border-left:2px solid var(--accent-dim);background:rgba(0,224,255,.035);font-size:11px;line-height:1.55;color:var(--text-muted)}.relationship-context strong{font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--accent)}
/* ===== CUSTOMER NETWORK MAP ===== */
.network-map{position:relative;isolation:isolate;height:390px;margin:12px 0 34px;overflow:hidden;border:1px solid var(--panel-border);border-radius:var(--radius);background:radial-gradient(ellipse at center,rgba(0,224,255,.09),rgba(5,8,16,.88) 68%)}
.network-map::before{content:'';position:absolute;inset:0;z-index:-2;background-image:linear-gradient(rgba(0,224,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(0,224,255,.045) 1px,transparent 1px);background-size:32px 32px}
.network-map::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;border:1px solid rgba(0,224,255,.12);box-shadow:inset 0 0 72px rgba(5,8,16,.8)}
.network-map-world{position:absolute;inset:52px 3% 15px;width:94%;height:calc(100% - 67px);z-index:-1;filter:blur(4px);opacity:.34;fill:rgba(0,224,255,.48);stroke:rgba(0,224,255,.8);stroke-width:2}
.network-map-heading{position:absolute;top:18px;left:22px;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--accent)}
.network-map-subheading{position:absolute;top:37px;left:22px;font-family:var(--mono);font-size:8px;letter-spacing:.1em;color:var(--text-muted)}
.company-mark{position:absolute;z-index:1;display:flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;box-shadow:none;transition:transform .2s ease;white-space:nowrap}
.company-mark img{display:block;width:64px;height:30px;max-width:100%;object-fit:contain}
.company-mark:hover{z-index:3;transform:scale(1.12);border-color:var(--accent)}
.exxon{left:15%;top:34%;color:#ff4253}.chevron{left:23%;top:56%;color:#ef3e42}.shell{left:47%;top:31%;color:#ffd526;background:rgba(89,24,8,.78)}.inpex{left:74%;top:35%;color:#54bde7}.smartmatic{left:25%;top:25%;color:#f7b82b}.dsta{left:79%;top:52%;color:#e7e7e7}.ncs{left:71%;top:59%;color:#f5b335}.lta{left:76%;top:63%;color:#ed5c41}.singtel{left:68%;top:67%;color:#ef502c}.starhub{left:82%;top:66%;color:#8cc63f}.ste{left:87%;top:57%;color:#f5f5f5;font-size:7px}.motorola{left:18%;top:45%;width:22px;height:22px;min-width:22px;min-height:22px;padding:0;border-radius:50%;color:#fff;background:#115da8;font-size:15px}.marconi{left:50%;top:46%;color:#d9f4ff}.rad{left:57%;top:60%;color:#db3136}
.company-mark.shell,.company-mark.motorola{background:transparent;border-radius:0}.company-mark.motorola{width:auto;height:auto;min-width:0;min-height:0}
/* Added marks retain the original free-positioned map treatment: no cards, no boxes. */
.bp{left:45%;top:27%}.aramco{left:60%;top:45%}.gs-caltex{left:83%;top:34%}.sk-energy{left:85%;top:40%}.singtel-new{left:75%;top:69%}.m1{left:81%;top:70%}.intel{left:10%;top:27%}.seagate{left:25%;top:29%}.moh{left:72%;top:68%}.moe{left:86%;top:73%}.worley-new{left:77%;top:80%}.saipem{left:52%;top:25%}.jgc{left:90%;top:29%}.hyundai-heavy{left:86%;top:46%}.samsung-heavy{left:90%;top:48%}.dsme{left:82%;top:47%}.keppel{left:78%;top:74%}.jurong{left:86%;top:78%}
.bp img,.aramco img,.gs-caltex img,.sk-energy img,.singtel-new img,.m1 img,.intel img,.seagate img,.moh img,.worley-new img,.saipem img,.jgc img,.hyundai-heavy img,.keppel img{width:42px;height:22px}.aramco img{width:46px;height:25px}.gs-caltex img{width:38px}.singtel-new img,.m1 img,.moh img,.jgc img,.hyundai-heavy img,.keppel img{width:30px;height:20px}.wordmark{font-family:var(--mono);font-size:7px;font-weight:700;letter-spacing:.03em;color:#dfeaf2;text-shadow:0 1px 4px #000}.samsung-heavy{color:#4a86d1}.dsme{color:#66a9e4}.moe{color:#e8edf2}.jurong{color:#9ec8df}

.business-cta{margin:32px 0 8px;padding:22px;border:1px solid rgba(0,224,255,.28);border-radius:var(--radius);background:linear-gradient(135deg,rgba(0,224,255,.07),rgba(5,8,16,.55))}.business-cta-heading{font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--accent);margin-bottom:10px}.business-cta p{max-width:760px;margin:0 0 16px;font-size:14px;line-height:1.6;color:var(--text-dim)}.business-cta-actions{display:flex;flex-wrap:wrap;gap:10px}.business-cta-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 14px;border-radius:2px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.04em;text-decoration:none;transition:all .2s ease}.business-cta-primary{background:var(--accent);border:1px solid var(--accent);color:var(--bg-0)}.business-cta-primary:hover{box-shadow:0 0 18px var(--accent-glow);transform:translateY(-1px)}.business-cta-secondary{border:1px solid var(--accent-dim);color:var(--accent)}.business-cta-secondary:hover{border-color:var(--accent);background:rgba(0,224,255,.08)}

/* ===== STRATEGIC INSIGHT ===== */
.strategic-insight{margin:24px 0;padding:24px;background:rgba(255,107,53,0.04);border:1px solid rgba(255,107,53,0.2);border-radius:var(--radius)}
.insight-label{font-family:var(--mono);font-size:11px;color:var(--accent-warm);letter-spacing:0.15em;margin-bottom:12px}
.insight-text{font-size:16px;font-style:italic;color:var(--text);line-height:1.6;margin-bottom:12px}
.insight-context{font-size:13px;color:var(--text-dim);line-height:1.7}

/* ===== CONTACT BLOCK ===== */
.contact-block{padding:20px 0}
.contact-block p{font-size:14px;color:var(--text-dim);margin-bottom:16px}
.contact-info{display:flex;gap:24px}
.contact-item{display:flex;flex-direction:column;gap:4px}
.contact-label{font-family:var(--mono);font-size:10px;color:var(--text-muted);letter-spacing:0.1em}
.contact-value{font-size:13px;color:var(--text)}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--bg-1)}
::-webkit-scrollbar-thumb{background:var(--accent-dim);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}

/* ===== RESPONSIVE ===== */
@media (max-width:1200px){
  .hub{grid-template-columns:260px 1fr 300px}
}
@media (max-width:1000px){
  .hub{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;height:auto;min-height:100vh;overflow-y:auto}
  html,body{overflow:auto}
  .panel-left,.panel-right{max-height:none}
  .avatar-stage{max-width:300px;margin:0 auto}
}
@media (max-width:600px){
  .hub{padding:50px 12px 40px}
  .panel-left,.panel-right{padding:16px 12px}
  .left-name{font-size:24px}
  .left-stats{grid-template-columns:1fr 1fr}
  .icon-grid{gap:8px}
  .tech-icon{padding:10px;flex-direction:column;align-items:center;text-align:center;gap:6px}
  .icon-frame{width:40px;height:40px}
  .icon-svg{width:22px;height:22px}
  .icon-label{font-size:13px}
  .icon-desc{font-size:10px}
  .interest-grid,.agents-grid,.leadership-proof-grid,.leadership-cases-grid{grid-template-columns:1fr}
  .skills-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
  .network-map{height:330px}.network-map-heading{font-size:10px;left:14px}.network-map-subheading{left:14px;font-size:7px}.company-mark{font-size:7px;min-width:34px;min-height:19px;padding:3px 4px}.motorola{width:19px;height:19px;min-width:19px;min-height:19px;font-size:12px}
  .subpage-inner{padding:50px 16px 30px}
  .subpage-header{flex-wrap:wrap}
  .subpage-number{font-size:32px}
  .subpage-title-zh{font-size:22px}
  .status-bar,.bottom-bar{font-size:9px;padding:4px 12px}
  .status-bar span,.bottom-bar span{font-size:9px}
}