@font-face {
  font-family: "Source Han Sans CN";
  src: url("./assets/fonts/SourceHanSansCN-VF.otf.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --matrix-bg: #020508;
  --matrix-ink: #eefcff;
  --matrix-cyan: #69e6f5;
  --matrix-blue: #178dcc;
  --matrix-dim: #78a4ae;
  --matrix-gold: #f2ca67;
  --main-logo-x: 435px;
  --main-logo-y: 625px;
  --main-logo-size: 250px;
  --headline-x: 65px;
  --headline-y: 180px;
  --technology-x: 800px;
  --technology-y: 190px;
  --data-x: 935px;
  --data-y: 475px;
  --innovation-x: 1000px;
  --innovation-y: 710px;
  --injection-x: 1260px;
  --injection-y: 190px;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--matrix-bg);
}

body {
  color: var(--matrix-ink);
  font-family: "Source Han Sans CN", "Noto Sans CJK SC", "PingFang SC", sans-serif;
  letter-spacing: 0;
  text-rendering: geometricPrecision;
}

button,
a { font: inherit; }

.public-skip-link {
  position: fixed;
  z-index: 100;
  top: 10px;
  left: 10px;
  padding: 9px 12px;
  color: #061013;
  background: #dffbff;
  border-radius: 4px;
  transform: translateY(-160%);
  transition: transform 160ms ease;
}

.public-skip-link:focus { transform: translateY(0); }

.matrix-portal {
  position: relative;
  width: 100vw;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  background: #020508;
}

.dense-matrix-hero {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: 1440px;
  height: 900px;
  overflow: visible;
  transform: translate(-50%, -50%) scale(var(--matrix-scale, 1));
  transform-origin: center;
  isolation: isolate;
}

.matrix-viewport-chrome {
  position: absolute;
  z-index: 6;
  inset: 0;
  pointer-events: none;
}

.matrix-viewport-chrome > :is(a, button) { pointer-events: auto; }

.matrix-stage,
.matrix-coordinate-plane,
.matrix-trunk-svg,
#public-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.matrix-stage { z-index: 0; overflow: visible; }
.matrix-coordinate-plane { z-index: 1; pointer-events: none; }
.matrix-trunk-svg { display: block; overflow: visible; }
#public-hero-canvas { z-index: 2; display: block; pointer-events: none; }

.matrix-main-path,
.matrix-gold-trunk path,
.matrix-branch-path,
.matrix-structure-line {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.matrix-main-path {
  stroke: url(#matrix-trunk-gradient);
  stroke-width: 4.8;
  stroke-dasharray: 1700;
  stroke-dashoffset: 1700;
  opacity: 0.94;
  animation: matrix-grow-main 2.3s cubic-bezier(0.2, 0.72, 0.18, 1) forwards;
}

.path-data { animation-delay: 280ms; stroke-width: 5.6; }
.path-innovation { animation-delay: 520ms; stroke-width: 4.2; }
.path-left { animation-delay: 720ms; stroke-width: 3.2; opacity: 0.74; }
.path-bottom { animation-delay: 900ms; stroke-width: 3; opacity: 0.66; }
.matrix-main-thread {
  stroke-width: 1.25;
  opacity: 0.68;
  filter: none;
}
.path-tech-thread,
.path-data-thread,
.path-innovation-thread { animation-delay: 440ms; }
.path-tech-thread-two,
.path-data-thread-two,
.path-innovation-thread-two { animation-delay: 720ms; opacity: 0.46; }

.matrix-branch-path {
  stroke: var(--branch-color, #2caed1);
  stroke-width: var(--branch-width, 0.85);
  stroke-dasharray: var(--branch-length, 900);
  stroke-dashoffset: var(--branch-length, 900);
  opacity: var(--branch-opacity, 0.5);
  animation: matrix-grow-branch 1.8s cubic-bezier(0.22, 0.7, 0.2, 1) forwards;
  animation-delay: var(--branch-delay, 900ms);
}

.matrix-branch-path.is-highlight {
  stroke: #bff8ff;
  stroke-width: 1.6;
  opacity: 0.78;
  filter: url(#matrix-blue-glow);
}

.matrix-branch-path.is-gold {
  stroke: url(#matrix-gold-gradient);
  opacity: 0.78;
  filter: url(#matrix-gold-glow);
}

.matrix-gold-trunk path {
  stroke: url(#matrix-gold-gradient);
  stroke-width: 2.6;
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
  opacity: 0.86;
  animation: matrix-grow-main 1.7s 1.7s ease forwards;
}

.matrix-structure-line {
  stroke: #55d7e7;
  stroke-width: 0.85;
  opacity: 0;
  animation: matrix-structure-arrive 700ms var(--structure-delay, 2.6s) ease forwards;
}

.matrix-structure-fill {
  fill: rgba(45, 179, 215, 0.08);
  stroke: #7eeeff;
  stroke-width: 0.85;
  opacity: 0;
  animation: matrix-structure-arrive 700ms var(--structure-delay, 2.6s) ease forwards;
}

.matrix-structure-node {
  fill: #b9f8ff;
  filter: url(#matrix-blue-glow);
  opacity: 0;
  animation: matrix-node-arrive 600ms var(--structure-delay, 2.6s) ease forwards;
}

@keyframes matrix-grow-main { to { stroke-dashoffset: 0; } }
@keyframes matrix-grow-branch { to { stroke-dashoffset: 0; } }
@keyframes matrix-structure-arrive { from { opacity: 0; transform: scale(0.84); } to { opacity: 0.72; transform: scale(1); } }
@keyframes matrix-node-arrive { from { opacity: 0; } to { opacity: 0.9; } }

.matrix-static-fallback {
  position: absolute;
  z-index: 0;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.matrix-static-fallback i {
  position: absolute;
  left: 29%;
  top: 69%;
  width: 48%;
  height: 1px;
  background: rgba(86, 213, 231, 0.32);
  transform-origin: left;
}

.matrix-static-fallback i:nth-child(1) { transform: rotate(-32deg); }
.matrix-static-fallback i:nth-child(2) { transform: rotate(-14deg); }
.matrix-static-fallback i:nth-child(3) { transform: rotate(8deg); }
.matrix-static-fallback i:nth-child(4) { transform: rotate(21deg); }
.matrix-static-fallback i:nth-child(5) { transform: rotate(154deg); }
.matrix-static-fallback i:nth-child(6) { transform: rotate(127deg); }
.matrix-stage.is-static #public-hero-canvas { opacity: 0; }
.matrix-stage.is-static .matrix-static-fallback { opacity: 1; }

.matrix-brand,
.matrix-employee-entry,
.matrix-headline,
.matrix-main-logo,
.matrix-capability,
.matrix-injection-core,
.matrix-energy-trigger,
.matrix-interaction-note,
.matrix-values,
.matrix-company-name,
.matrix-live-status {
  position: absolute;
  z-index: 5;
}

.matrix-brand {
  top: 25px;
  left: 30px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #f0fcff;
  text-decoration: none;
}

.matrix-brand img { width: 68px; height: 68px; object-fit: contain; filter: drop-shadow(0 0 12px rgba(39, 205, 230, 0.38)); }
.matrix-brand strong { font-size: 26px; font-weight: 430; letter-spacing: 3px; }

.matrix-employee-entry {
  top: 30px;
  right: 30px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 0 2px;
  color: #c4d9de;
  border-bottom: 1px solid rgba(116, 214, 229, 0.38);
  text-decoration: none;
  font-size: 14px;
  transition: color 170ms ease, border-color 170ms ease;
}

.matrix-employee-entry span { color: var(--matrix-cyan); font-size: 18px; transition: transform 170ms ease; }
.matrix-employee-entry:hover,
.matrix-employee-entry:focus-visible { color: #fff; border-color: var(--matrix-cyan); }
.matrix-employee-entry:hover span,
.matrix-employee-entry:focus-visible span { transform: translate(3px, -3px); }

.matrix-headline {
  left: var(--headline-x);
  top: var(--headline-y);
  width: 570px;
  background: rgba(2, 5, 8, 0.86);
  box-shadow: 0 0 34px 22px rgba(2, 5, 8, 0.86);
  pointer-events: none;
}

.matrix-headline h1 { margin: 0; line-height: 1.05; font-weight: 260; letter-spacing: 3px; text-shadow: 0 0 26px rgba(120, 225, 241, 0.2); }
.matrix-headline span,
.matrix-headline strong { display: block; }
.matrix-headline span { font-size: 63px; color: #f3fdff; font-weight: 260; }
.matrix-headline strong { margin-top: 15px; font-size: 69px; color: #e8fbff; font-weight: 350; white-space: nowrap; }

.matrix-main-logo {
  left: var(--main-logo-x);
  top: var(--main-logo-y);
  width: var(--main-logo-size);
  height: var(--main-logo-size);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.matrix-main-logo img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(1.08) saturate(1.12) drop-shadow(0 0 9px rgba(64, 231, 249, 0.8)) drop-shadow(0 0 34px rgba(20, 126, 241, 0.55));
}

.matrix-logo-aura {
  position: absolute;
  z-index: 1;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(130, 246, 255, 0.32) 0%, rgba(18, 117, 231, 0.17) 36%, transparent 72%);
  box-shadow: 0 0 54px rgba(24, 162, 234, 0.44);
  animation: matrix-logo-breathe 3.2s ease-in-out infinite;
}

@keyframes matrix-logo-breathe { 50% { transform: scale(1.14); opacity: 0.72; } }

.matrix-capability {
  width: 190px;
  color: var(--matrix-cyan);
  text-shadow: 0 0 14px rgba(42, 205, 231, 0.28);
}

.matrix-capability::before {
  content: "";
  position: absolute;
  top: 33px;
  right: calc(100% + 8px);
  width: 128px;
  height: 1px;
  background: rgba(78, 218, 236, 0.72);
  box-shadow: 0 0 8px rgba(65, 220, 240, 0.4);
}

.matrix-capability::after {
  content: "";
  position: absolute;
  top: 29px;
  left: -12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9ff6ff;
  box-shadow: 0 0 14px #2ee9ff;
}

.matrix-capability h2 { margin: 0 0 13px; font-size: 23px; line-height: 1.2; font-weight: 560; }
.matrix-capability ul { margin: 0; padding: 0; list-style: none; }
.matrix-capability li { font-size: 14px; line-height: 1.55; color: rgba(84, 221, 239, 0.9); }
.matrix-capability-tech { left: var(--technology-x); top: var(--technology-y); }
.matrix-capability-data { left: var(--data-x); top: var(--data-y); }
.matrix-capability-innovation { left: var(--innovation-x); top: var(--innovation-y); }

.matrix-injection-core {
  left: var(--injection-x);
  top: var(--injection-y);
  width: 118px;
  height: 118px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.matrix-injection-light {
  position: absolute;
  inset: 38px;
  border-radius: 50%;
  background: #fff5bf;
  box-shadow: 0 0 8px #fff, 0 0 22px #ffd274, 0 0 64px rgba(229, 169, 52, 0.8), 0 0 110px rgba(223, 154, 28, 0.32);
  animation: matrix-gold-pulse 1.9s ease-in-out infinite;
}

.matrix-injection-ring {
  position: absolute;
  border: 1px solid rgba(255, 224, 143, 0.65);
  border-radius: 50%;
  animation: matrix-ring-rotate 7s linear infinite;
}
.ring-one { inset: 20px; border-style: dashed; }
.ring-two { inset: 5px; opacity: 0.4; animation-direction: reverse; animation-duration: 11s; }
.matrix-injection-ray { position: absolute; left: 58px; top: -18px; width: 1px; height: 156px; background: rgba(255, 225, 146, 0.5); transform-origin: center; }
.ray-two { transform: rotate(45deg); }
.ray-three { transform: rotate(90deg); }
.ray-four { transform: rotate(135deg); }

.matrix-injection-cursor {
  position: absolute;
  z-index: 3;
  left: 68px;
  top: 70px;
  width: 31px;
  height: 44px;
  background: #fff;
  clip-path: polygon(0 0, 100% 72%, 58% 72%, 76% 100%, 58% 100%, 40% 74%, 0 100%);
  filter: drop-shadow(0 0 2px #000) drop-shadow(0 0 8px rgba(255, 218, 118, 0.75));
  transform: rotate(-17deg);
}

@keyframes matrix-gold-pulse { 50% { transform: scale(1.2); box-shadow: 0 0 10px #fff, 0 0 34px #ffd274, 0 0 82px rgba(229, 169, 52, 0.9); } }
@keyframes matrix-ring-rotate { to { transform: rotate(360deg); } }

.matrix-energy-trigger {
  top: 160px;
  right: 28px;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 0 0 0 12px;
  color: #f7d878;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(244, 204, 99, 0.6);
  cursor: pointer;
  font-size: 19px;
  font-weight: 560;
  transition: color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.matrix-energy-trigger span { font-size: 25px; }
.matrix-energy-trigger:hover,
.matrix-energy-trigger:focus-visible { color: #fff0ae; border-color: #ffe290; transform: translateX(4px); }
.matrix-injection-core.is-energized { animation: matrix-core-impact 800ms ease-out; }
@keyframes matrix-core-impact { 40% { transform: translate(-50%, -50%) scale(1.3); } }

.matrix-interaction-note { top: 215px; right: 28px; margin: 0; color: rgba(197, 178, 118, 0.68); font-size: 11px; }

.matrix-values {
  bottom: 23px;
  left: 40px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: rgba(196, 224, 228, 0.72);
  font-size: 12px;
}
.matrix-values i { width: 3px; height: 3px; border-radius: 50%; background: var(--matrix-cyan); box-shadow: 0 0 8px var(--matrix-cyan); }
.matrix-company-name { right: 30px; bottom: 24px; margin: 0; color: rgba(244, 250, 251, 0.82); font-size: 16px; letter-spacing: 2px; }
.matrix-live-status { width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

:focus-visible { outline: 2px solid #8cf3ff; outline-offset: 5px; }

@media (max-width: 600px) {
  html,
  body { overflow: hidden; }
  .matrix-portal { min-height: 640px; }
  .dense-matrix-hero { top: 0; left: 0; width: 100%; height: 100%; transform: none !important; }
  .matrix-stage { overflow: hidden; }
  .matrix-coordinate-plane { inset: auto; left: -80px; top: 340px; width: 700px; height: 438px; }
  #public-hero-canvas { opacity: 0.84; }
  .matrix-brand { top: 18px; left: 18px; gap: 8px; }
  .matrix-brand img { width: 39px; height: 39px; }
  .matrix-brand strong { font-size: 16px; letter-spacing: 1px; }
  .matrix-employee-entry { top: 18px; right: 18px; min-height: 38px; font-size: 12px; }
  .matrix-headline { left: 20px; top: 112px; width: calc(100% - 40px); }
  .matrix-headline span { font-size: 43px; }
  .matrix-headline strong { margin-top: 8px; font-size: 48px; white-space: nowrap; letter-spacing: 0; }
  .matrix-main-logo { left: 145px; top: 590px; width: 165px; height: 165px; }
  .matrix-capability { width: 140px; }
  .matrix-capability::before { width: 44px; }
  .matrix-capability h2 { margin: 0; font-size: 15px; }
  .matrix-capability ul { display: none; }
  .matrix-capability-tech { left: 220px; top: 382px; }
  .matrix-capability-data { left: 242px; top: 555px; }
  .matrix-capability-innovation { left: 222px; top: 696px; }
  .matrix-injection-core { left: calc(100% - 62px); top: 300px; width: 72px; height: 72px; }
  .matrix-injection-light { inset: 25px; }
  .matrix-injection-ring.ring-one { inset: 12px; }
  .matrix-injection-ring.ring-two { inset: 2px; }
  .matrix-injection-ray { left: 35px; top: -8px; height: 88px; }
  .matrix-injection-cursor { left: 42px; top: 42px; width: 20px; height: 29px; }
  .matrix-energy-trigger { top: 253px; right: 18px; min-height: 42px; padding-left: 4px; font-size: 14px; }
  .matrix-energy-trigger span { font-size: 19px; }
  .matrix-interaction-note { display: none; }
  .matrix-values { bottom: 16px; left: 50%; transform: translateX(-50%); gap: 8px; white-space: nowrap; font-size: 10px; }
  .matrix-company-name { right: 18px; bottom: 44px; max-width: 260px; font-size: 10px; letter-spacing: 1px; text-align: right; }
}

@media (max-width: 360px) {
  .matrix-brand strong { max-width: 96px; font-size: 14px; }
  .matrix-headline span { font-size: 38px; }
  .matrix-headline strong { font-size: 43px; }
  .matrix-main-logo { left: 130px; width: 150px; height: 150px; }
  .matrix-capability-tech { left: 202px; }
  .matrix-capability-data { left: 220px; }
  .matrix-capability-innovation { left: 202px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after { animation: none !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .matrix-main-path,
  .matrix-gold-trunk path,
  .matrix-branch-path { stroke-dashoffset: 0 !important; }
  .matrix-structure-line,
  .matrix-structure-fill,
  .matrix-structure-node { opacity: 0.72 !important; }
  #public-hero-canvas { display: none; }
}