.home-page .hero-overview {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #f7f7f3;
  background: #08201a;
}
.hero-overview::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(90deg, #08201a 8%, #08201aed 32%, #08201a55 74%, #08201a33),
    radial-gradient(ellipse at 78% 42%, #18584554, transparent 63%),
    url("home-hero.webp") right 38% / cover no-repeat;
}
.home-page .hero-overview .hero-grid {
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
  padding-top: 52px;
  padding-bottom: 56px;
}
.hero-overview .hero-copy { min-width: 0; }
.branded .hero-overview h1 {
  font: 900 clamp(40px, 4.05vw, 61px)/1.25 'LTCC Slogan', 'Songti SC', serif;
  color: #f7f7f3;
}
.branded .hero-overview h1 em {
  font-weight: 760;
  color: #a7edcb;
  background: linear-gradient(110deg, #a7edcb, #5fe0b0);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.branded .hero-overview .eyebrow { color: #a7edcb; }
.branded .hero-overview .lead {
  color: #c9dbd4;
  max-width: 35em;
  margin-top: 22px;
  font-size: 15px;
  line-height: 1.95;
}
.branded .hero-overview .button {
  background: linear-gradient(120deg, #a7edcb, #5fe0b0);
  border-color: transparent;
  color: #08201a;
}
.branded .hero-overview .button.secondary {
  background: #08201a66;
  border-color: #a7edcb65;
  color: #f7f7f3;
}
.hero-overview .button:hover { box-shadow: 0 0 0 2px #a7edcb80; }
.hero-universe { min-width: 0; }
.cloud-heading, .graph-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #c9dbd4;
  font-size: 11px;
  letter-spacing: .08em;
}
.cloud-heading > span { display: flex; align-items: center; gap: 9px; }
.cloud-heading i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #a7edcb;
  box-shadow: 0 0 0 4px #a7edcb24;
}
.graph-toggle {
  border: 1px solid #a7edcb58;
  background: #08201a80;
  color: #e1f3eb;
  border-radius: 999px;
  padding: 8px 12px;
  font: inherit;
  cursor: pointer;
}
.graph-toggle:hover { border-color: #a7edcb; }
.knowledge-graph {
  position: relative;
  isolation: isolate;
  height: clamp(380px, 33vw, 460px);
  margin: 12px 0;
  background: radial-gradient(ellipse, #17604e44, transparent 69%);
}
.graph-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.graph-lines path { fill: none; stroke: #a7edcb; opacity: .37; }
.graph-lines path.product-edge { stroke-dasharray: 4 5; opacity: .67; }
.graph-lines path.lit { opacity: 1; stroke-width: 1.5; }
.graph-lines circle { fill: #a7edcb; }
.graph-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  aspect-ratio: 1;
  border: 1px solid #a7edcb40;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.orbit-one { height: 81%; }
.orbit-two { height: 56%; border-style: dashed; }
.graph-node {
  position: absolute;
  z-index: 1;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 8px 12px;
  border: 1px solid #a7edcb60;
  border-radius: 14px;
  background: linear-gradient(145deg, #1b483c, #0b2922);
  color: #f1fbf5;
  white-space: nowrap;
  box-shadow: 0 8px 24px #0004, inset 0 1px #ffffff14;
  transition: border-color .2s, box-shadow .2s;
}
.graph-node > span { font-size: 15px; font-weight: 700; line-height: 1.35; }
.graph-node small { color: #c9dbd4; font-size: 10px; margin-top: 3px; }
.graph-node.product { background: #103a2e; border-style: dashed; }
.graph-node.core {
  width: 150px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 28%, #256b53, #0b2a22 76%);
  box-shadow: 0 0 0 8px #a7edcb10, 0 0 44px #5fe0b035;
}
.graph-node.core img { width: 30px; height: 42px; margin-bottom: 8px; object-fit: contain; }
.graph-node.core > span { font-size: 23px; }
.graph-node:hover, .graph-node:focus-visible, .graph-node.connected {
  z-index: 2;
  border-color: #a7edcb;
  box-shadow: 0 0 24px #5fe0b048;
  color: #fff;
}
.graph-footer { border-top: 1px solid #a7edcb35; padding-top: 12px; }
@media (max-width: 900px) {
  .home-page .hero-overview .hero-grid { grid-template-columns: 1fr; }
  .hero-universe { width: 100%; max-width: 590px; margin: auto; }
  .hero-overview::before {
    background:
      linear-gradient(180deg, #08201af5, #08201a68 66%, #08201aaa),
      radial-gradient(ellipse at 70% 70%, #18584554, transparent 65%),
      url("home-hero-mobile.webp") 88% center / cover no-repeat;
  }
}
@media (max-width: 540px) {
  .home-page .hero-overview .hero-grid { padding-top: 38px; padding-bottom: 32px; gap: 32px; }
  .branded .hero-overview h1 { font-size: clamp(31px, 8.7vw, 42px); }
  .branded .hero-overview .lead { font-size: 14px; }
  .knowledge-graph { height: 352px; }
  .graph-node { padding: 6px 7px; min-height: 44px; border-radius: 11px; }
  .graph-node > span { font-size: 13px; }
  .graph-node small { font-size: 8px; }
  .graph-node.core { width: 108px; }
  .graph-node.core img { width: 22px; height: 31px; margin-bottom: 5px; }
  .graph-node.core > span { font-size: 17px; }
  .graph-footer { font-size: 10px; letter-spacing: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .graph-node { transition: none; }
}