/* Brand-led optical network. Layout and motion stay independent. */
#tech.technology-section { --tech-ink:#f0efed; --tech-muted:#96999f; --tech-line:rgba(211,215,225,.10); padding:76px 0 80px; background:#0a0b0d; color:var(--tech-ink); }
#tech.technology-section .tech-head { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:32px; }
#tech.technology-section .tech-kicker { display:block; color:#e59a71; font-size:11px; font-weight:500; letter-spacing:2px; margin-bottom:16px; }
#tech.technology-section .tech-head h2 { color:var(--tech-ink); font-size:clamp(31px,3.2vw,44px); font-weight:500; line-height:1.28; letter-spacing:-1.2px; margin:0; }
#tech.technology-section .tech-head p { max-width:360px; margin:0 0 3px; color:var(--tech-muted); font-size:14px; line-height:1.8; }
#tech.technology-section .tech-network-shell { overflow:hidden; border:1px solid rgba(218,220,232,.11); border-radius:20px; background:#0c0d10; box-shadow:inset 0 1px 0 #ffffff03; }
#tech.technology-section .tech-network { position:relative; isolation:isolate; height:490px; overflow:hidden; perspective:1200px; perspective-origin:50% 50%; background:radial-gradient(ellipse at 50% 49%,#24212444,transparent 57%); }
#tech.technology-section .tech-network::before { content:""; position:absolute; z-index:-2; inset:0; pointer-events:none; opacity:.2; background-image:radial-gradient(#afb4c7 0.55px,transparent .8px); background-size:24px 24px; mask-image:radial-gradient(ellipse at center,transparent 28%,#000 75%,transparent); }
#tech.technology-section .tech-network::after { content:""; position:absolute; z-index:-1; left:50%; top:50%; width:540px; height:400px; transform:translate(calc(-50% + var(--tech-shift-x,0px)),calc(-50% + var(--tech-shift-y,0px))); background:radial-gradient(ellipse at 48% 45%,rgba(var(--tech-active-rgb,243,144,91),.095),transparent 61%); pointer-events:none; }
#tech.technology-section .tech-wires { position:absolute; z-index:1; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
#tech.technology-section [data-tech-color="software"] { --node-accent:#9abaff; --node-rgb:154,186,255; }
#tech.technology-section [data-tech-color="hardware"] { --node-accent:#93cee8; --node-rgb:147,206,232; }
#tech.technology-section [data-tech-color="llm"] { --node-accent:#bca1f4; --node-rgb:188,161,244; }
#tech.technology-section [data-tech-color="data"] { --node-accent:#d9b69e; --node-rgb:217,182,158; }
#tech.technology-section [data-tech-color="cloud"] { --node-accent:#78cbdc; --node-rgb:120,203,220; }
#tech.technology-section [data-tech-color="security"] { --node-accent:#aec5e0; --node-rgb:174,197,224; }
#tech.technology-section .tech-link-channel { fill:none; stroke:rgba(var(--node-rgb),.025); stroke-width:8; stroke-linecap:round; }
#tech.technology-section .tech-link { fill:none; stroke:rgba(var(--node-rgb),.27); stroke-width:.75; transition:stroke .35s; }
#tech.technology-section .tech-link-glow { fill:none; stroke:var(--node-accent); stroke-width:1; opacity:.12; transition:opacity .35s; filter:drop-shadow(0 0 5px rgba(var(--node-rgb),.4)); }
#tech.technology-section .tech-link-beam { fill:none; stroke:var(--node-accent); stroke-width:1.6; stroke-linecap:round; opacity:.88; filter:drop-shadow(0 0 4px rgba(var(--node-rgb),.65)); transition:opacity .35s; }
#tech.technology-section .tech-particle { fill:#fff; filter:drop-shadow(0 0 4px var(--node-accent)); }
#tech.technology-section .tech-particle-halo { fill:var(--node-accent); }
#tech.technology-section .tech-particle-tail { fill:var(--node-accent); }
#tech.technology-section .tech-terminal { fill:var(--node-accent); stroke:none; opacity:.35; }
#tech.technology-section .tech-wire.is-active .tech-link { stroke:rgba(var(--node-rgb),.62); }
#tech.technology-section .tech-wire.is-active .tech-link-glow { opacity:.55; }
#tech.technology-section .tech-wire.is-active .tech-terminal { opacity:1; filter:drop-shadow(0 0 4px rgba(var(--node-rgb),.6)); }
/* One polished face, a fine illuminated edge, and soft light in the surrounding space. */
#tech.technology-section .tech-core-zone { position:absolute; z-index:2; left:50%; top:50%; width:340px; height:340px; transform:translate(-50%,-50%); perspective:950px; pointer-events:none; }
#tech.technology-section .tech-core-shadow { position:absolute; z-index:0; left:50%; top:50%; width:230px; height:70px; transform:translate(calc(-50% + var(--core-dx,0px)*.35),calc(-50% + 118px)); background:radial-gradient(ellipse,#000b,transparent 70%); }
#tech.technology-section .tech-core { position:absolute; z-index:4; left:50%; top:50%; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:6px; width:184px; height:184px; transform:translate(-50%,-50%) translate3d(var(--core-dx,0px),calc(var(--core-dy,0px) - var(--core-lift,0px)),0) rotateX(calc(8deg + var(--tech-y,0)*-3deg)) rotateY(calc(-12deg + var(--tech-x,0)*5deg)); border:1px solid transparent; border-radius:38px; background:linear-gradient(140deg,#313137,#17181d 33%,#111216 72%,#242125) padding-box,linear-gradient(145deg,#e7e8ecb3,#74788170 18%,#2c2f3455 45%,#ea986099 76%,#e8bf9e80) border-box; box-shadow:1px 3px 0 #1a1b20,2px 5px 0 #3e3c3d,8px 23px 28px -13px #000,0 0 68px -20px rgba(var(--tech-active-rgb,243,144,91),.2),inset 0 1px 0 #ffffff1a; }
#tech.technology-section .tech-core::before { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:radial-gradient(ellipse at var(--tech-light-x,30%) var(--tech-light-y,10%),#ffffff0a,transparent 66%); }
#tech.technology-section .tech-core::after { content:"J I F E N G"; position:relative; z-index:2; color:#c4bfb9; font-size:8px; font-weight:500; letter-spacing:2px; line-height:1; }
#tech.technology-section .tech-core-glass { position:absolute; inset:0; overflow:hidden; border-radius:inherit; background:radial-gradient(ellipse at 50% 100%,rgba(var(--tech-active-rgb,243,144,91),.13),transparent 70%); }
#tech.technology-section .tech-core-glass::after { content:""; position:absolute; inset:-100%; background:linear-gradient(116deg,transparent 44%,#e6e9ff06 47%,#fff1 50%,transparent 54%); transform:translateX(-38%); animation:techGlassSweep 10s ease-in-out infinite; animation-play-state:paused; }
#tech.technology-section .tech-core img { position:relative; z-index:2; display:block; width:154px; height:154px; margin-block:-15px -11px; object-fit:contain; filter:url(#jf-mark-cutout) drop-shadow(0 2px 1px #ffffff29) drop-shadow(0 0 14px #ffffff12); }
#tech.technology-section .tech-core-caption { position:absolute; z-index:6; top:calc(50% + 128px); left:50%; transform:translateX(-50%); color:#7f7c79; font-size:8px; letter-spacing:3px; white-space:nowrap; }
#tech.technology-section .tech-orbit { position:absolute; z-index:0; left:50%; top:50%; width:322px; height:322px; margin:-161px; transform:rotateX(66deg) rotateY(-12deg) rotateZ(-24deg); border:1px solid #cac9d61f; border-bottom-color:#e9a98165; border-radius:50%; box-shadow:0 1px 8px #e4984e08; }
#tech.technology-section .tech-orbit::before { content:""; position:absolute; inset:-1px; border:1px solid transparent; border-left-color:#f4ba8e; border-radius:50%; filter:drop-shadow(0 0 4px #ef915d); animation:techOrbit 24s linear infinite; animation-play-state:paused; }
#tech.technology-section .tech-orbit-two { width:370px; height:370px; margin:-185px; transform:rotateX(67deg) rotateY(24deg) rotateZ(27deg); border-color:#c8d3ed14; border-top-color:#adbbd646; }
#tech.technology-section .tech-orbit-two::before { border-left-color:#c7d7f078; filter:drop-shadow(0 0 3px #c7d7f0); animation-duration:32s; animation-direction:reverse; }
#tech.technology-section .tech-network.is-running .tech-orbit::before,#tech.technology-section .tech-network.is-running .tech-core-glass::after { animation-play-state:running; }
@keyframes techOrbit { to { rotate:360deg; } }
@keyframes techGlassSweep { 0%,12% { transform:translateX(-38%); } 72%,100% { transform:translateX(38%); } }
#tech.technology-section .tech-node { --node-anchor-y:0%; position:absolute; isolation:isolate; z-index:3; width:244px; min-height:88px; display:flex; align-items:center; gap:18px; padding:19px 22px; color:var(--tech-ink); font:inherit; text-align:left; cursor:pointer; border:1px solid #ffffff13; border-top-color:#ffffff22; border-radius:14px; background:linear-gradient(125deg,#202125e8,#141619f5 72%); transform:translateY(var(--node-anchor-y)) translate3d(var(--node-dx,0px),calc(var(--node-dy,0px) - var(--node-lift,0px)),0) rotateX(calc(var(--tech-y,0)*-1deg)) rotateY(calc(var(--tech-x,0)*1.5deg)); box-shadow:0 12px 24px -16px #000b,inset 0 1px 0 #ffffff03; transition:border-color .3s,box-shadow .3s; }
#tech.technology-section .tech-node::before { content:""; position:absolute; z-index:-1; inset:0; border-radius:inherit; pointer-events:none; background:radial-gradient(200px circle at var(--tech-light-x,30%) var(--tech-light-y,0%),rgba(var(--node-rgb),.1),transparent 72%); }
#tech.technology-section .tech-node::after { content:""; position:absolute; inset:auto 22px -1px; height:1px; background:linear-gradient(90deg,transparent,rgba(var(--node-rgb),.65),transparent); opacity:0; transition:opacity .3s; }
#tech.technology-section .tech-node.is-active { border-color:rgba(var(--node-rgb),.32); box-shadow:0 16px 32px -16px #000b,0 0 28px -18px rgba(var(--node-rgb),.25); }
#tech.technology-section .tech-node.is-active::after { opacity:1; }
#tech.technology-section .tech-node:focus-visible { outline:2px solid var(--node-accent); outline-offset:4px; }
#tech.technology-section .tech-node-port { position:absolute; right:-2px; top:50%; width:3px; height:3px; transform:translateY(-50%); border-radius:50%; background:var(--node-accent); box-shadow:0 0 8px rgba(var(--node-rgb),.4); }
#tech.technology-section .tech-node-icon { flex:none; display:grid; place-items:center; width:34px; height:40px; color:var(--node-accent); }
#tech.technology-section .tech-node-icon svg { width:27px; height:27px; fill:none; stroke:currentColor; stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round; }
#tech.technology-section .tech-node-copy { display:flex; flex-direction:column; gap:9px; min-width:0; }
#tech.technology-section .tech-node-copy small { color:#94989f; font-size:9px; font-weight:400; line-height:1; letter-spacing:1.8px; }
#tech.technology-section .tech-node-copy strong { color:#e4e5e7; font-size:17px; font-weight:450; line-height:1.4; white-space:nowrap; }
#tech.technology-section .tech-node.is-active small { color:var(--node-accent); }
#tech.technology-section [data-tech-node="software"] { left:6%; right:auto; top:50%; bottom:auto; --node-anchor-y:-50%; }
#tech.technology-section [data-tech-node="hardware"] { right:6%; left:auto; top:auto; bottom:54px; }
#tech.technology-section [data-tech-node="llm"] { left:6%; right:auto; top:54px; bottom:auto; }
#tech.technology-section [data-tech-node="data"] { right:6%; left:auto; top:54px; bottom:auto; }
#tech.technology-section [data-tech-node="cloud"] { right:6%; left:auto; top:50%; bottom:auto; --node-anchor-y:-50%; }
#tech.technology-section [data-tech-node="security"] { left:6%; right:auto; top:auto; bottom:54px; }
#tech.technology-section [data-tech-node="hardware"] .tech-node-port,#tech.technology-section [data-tech-node="data"] .tech-node-port,#tech.technology-section [data-tech-node="cloud"] .tech-node-port { left:-2px; right:auto; }
#tech.technology-section .tech-network-status { margin:0; min-height:38px; padding:0 20px 18px; color:#898d97; text-align:center; font-size:12px; line-height:1.7; }
#tech.technology-section .tech-directions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--tech-line); background:rgba(255,255,255,.012); }
#tech.technology-section .tech-direction { min-width:0; position:relative; padding:22px 30px 24px; border-right:1px solid var(--tech-line); transition:background .35s; }
#tech.technology-section .tech-direction:last-child { border-right:0; }
#tech.technology-section .tech-direction.is-active { background:rgba(var(--node-rgb),.045); }
#tech.technology-section .tech-direction::before { content:""; position:absolute; top:-1px; left:30px; right:30px; height:1px; background:var(--node-accent); opacity:0; transition:opacity .35s; }
#tech.technology-section .tech-direction.is-active::before { opacity:.8; }
#tech.technology-section .tech-direction-top { display:flex; align-items:baseline; gap:13px; margin-bottom:12px; }
#tech.technology-section .tech-direction-top>span { color:var(--node-accent); font-size:10px; letter-spacing:1px; }
#tech.technology-section .tech-direction h3 { color:#e8e8e7; font-size:18px; font-weight:500; line-height:1.4; margin:0; }
#tech.technology-section .tech-direction-tags { display:flex; flex-wrap:wrap; gap:8px 17px; }
#tech.technology-section .tech-direction-tags span { color:#9296a0; font-size:12px; }
#tech.technology-section .tech-direction-tags span+span::before { content:"/"; color:#484c55; margin-right:17px; }

@media(max-width:1050px) {
  #tech.technology-section .tech-node { width:196px; gap:12px; padding:18px; }
  #tech.technology-section .tech-node-copy strong { font-size:16px; }
  #tech.technology-section [data-tech-node="software"],#tech.technology-section [data-tech-node="llm"],#tech.technology-section [data-tech-node="security"] { left:4%; right:auto; }
  #tech.technology-section [data-tech-node="data"],#tech.technology-section [data-tech-node="cloud"],#tech.technology-section [data-tech-node="hardware"] { right:4%; left:auto; }
  #tech.technology-section .tech-head { gap:25px; }
  #tech.technology-section .tech-head p { max-width:300px; }
}
@media(max-width:800px) {
  #tech.technology-section { padding:58px 0; }
  #tech.technology-section .tech-head { display:block; margin-bottom:25px; }
  #tech.technology-section .tech-kicker { margin-bottom:12px; }
  #tech.technology-section .tech-head h2 { font-size:30px; line-height:1.4; letter-spacing:-.7px; }
  #tech.technology-section .tech-head p { max-width:500px; font-size:13px; margin:13px 0 0; }
  #tech.technology-section .tech-network-shell { border-radius:14px; }
  #tech.technology-section .tech-network { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:100px 164px 100px; gap:16px 10px; height:auto; padding:22px 14px 18px; perspective:1000px; }
  #tech.technology-section .tech-network::after { width:320px; height:300px; }
  #tech.technology-section .tech-core-zone { position:relative; grid-column:1/-1; grid-row:2; left:auto; top:auto; width:100%; height:164px; transform:none; perspective:650px; }
  #tech.technology-section .tech-core-shadow { width:140px; height:40px; transform:translate(-50%,calc(-50% + 66px)); }
  #tech.technology-section .tech-core { width:92px; height:92px; border-radius:22px; gap:0; transform:translate(-50%,-50%) translate3d(var(--core-dx,0px),calc(var(--core-dy,0px) - var(--core-lift,0px)),0) rotateX(8deg) rotateY(-8deg); box-shadow:1px 2px 0 #1a1b20,2px 3px 0 #3e3c3d,4px 14px 20px -12px #000,0 0 48px -20px rgba(var(--tech-active-rgb,243,144,91),.3); }
  #tech.technology-section .tech-core::after { display:none; }
  #tech.technology-section .tech-core img { width:85px; height:85px; margin:0; }
  #tech.technology-section .tech-core-caption { top:calc(50% + 69px); font-size:6px; letter-spacing:2px; }
  #tech.technology-section .tech-orbit { width:170px; height:170px; margin:-85px; }
  #tech.technology-section .tech-orbit-two { width:200px; height:200px; margin:-100px; }
  #tech.technology-section .tech-node { --node-anchor-y:0%; position:relative; inset:auto; width:100%; height:100px; min-height:0; transform:translate3d(var(--node-dx,0px),calc(var(--node-dy,0px) - var(--node-lift,0px)),0); padding:12px 5px; gap:10px; flex-direction:column; justify-content:center; text-align:center; border-radius:10px; }
  #tech.technology-section .tech-node-icon { width:25px; height:25px; }
  #tech.technology-section .tech-node-icon svg { width:23px; height:23px; }
  #tech.technology-section .tech-node-copy { gap:5px; align-items:center; }
  #tech.technology-section .tech-node-copy small { font-size:7px; letter-spacing:.8px; }
  #tech.technology-section .tech-node-copy strong { font-size:clamp(12px,3.45vw,14px); line-height:1.35; }
  #tech.technology-section [data-tech-node="software"] { left:auto; top:auto; grid-column:1; grid-row:1; }
  #tech.technology-section [data-tech-node="hardware"] { right:auto; top:auto; bottom:auto; grid-column:2; grid-row:1; }
  #tech.technology-section [data-tech-node="llm"] { left:auto; right:auto; top:auto; bottom:auto; grid-column:3; grid-row:1; }
  #tech.technology-section [data-tech-node="data"] { left:auto; right:auto; top:auto; bottom:auto; grid-column:1; grid-row:3; }
  #tech.technology-section [data-tech-node="cloud"] { left:auto; right:auto; top:auto; grid-column:2; grid-row:3; }
  #tech.technology-section [data-tech-node="security"] { left:auto; bottom:auto; grid-column:3; grid-row:3; }
  #tech.technology-section .tech-node .tech-node-port { left:50%; right:auto; top:auto; bottom:-2px; width:3px; height:3px; transform:translateX(-50%); }
  #tech.technology-section [data-tech-node="data"] .tech-node-port,#tech.technology-section [data-tech-node="cloud"] .tech-node-port,#tech.technology-section [data-tech-node="security"] .tech-node-port { top:-2px; bottom:auto; }
  #tech.technology-section .tech-network-status { min-height:47px; padding:0 18px 15px; font-size:11px; line-height:1.7; }
  #tech.technology-section .tech-direction { padding:20px 12px; }
  #tech.technology-section .tech-direction-top { flex-direction:column; align-items:flex-start; gap:9px; margin-bottom:12px; }
  #tech.technology-section .tech-direction-top>span { font-size:9px; }
  #tech.technology-section .tech-direction h3 { font-size:15px; }
  #tech.technology-section .tech-direction-tags { gap:7px; flex-direction:column; }
  #tech.technology-section .tech-direction-tags span { font-size:11px; }
  #tech.technology-section .tech-direction-tags span+span::before { display:none; }
  #tech.technology-section .tech-direction::before { left:12px; right:12px; }
}
@media(prefers-reduced-motion:reduce) {
  #tech.technology-section .tech-orbit::before,#tech.technology-section .tech-core-glass::after { animation:none; }
  #tech.technology-section .tech-node,#tech.technology-section .tech-node::after,#tech.technology-section .tech-link,#tech.technology-section .tech-link-glow,#tech.technology-section .tech-link-beam,#tech.technology-section .tech-direction { transition:none; }
}