:root {
  --web-red: #a42a36;
  --web-red-hot: #c1646d;
  --web-white: #f7f7f5;
  --web-black: #070708;
}

.neural-hero::before {
  background:
    linear-gradient(90deg, rgba(7,7,8,.99) 0%, rgba(7,7,8,.94) 34%, rgba(7,7,8,.42) 59%, rgba(7,7,8,.79) 100%),
    radial-gradient(circle at 77% 45%, rgba(164,42,54,.17), transparent 39%);
}

.neural-hero .engine-grid {
  opacity: .48;
  background-size: 58px 58px;
}

.neural-hero .engine-aura {
  width: min(67vw, 970px);
  background: radial-gradient(circle, rgba(164,42,54,.16), rgba(164,42,54,.045) 38%, transparent 69%);
}

#neural-web-canvas {
  position: absolute;
  inset: 0 0 70px;
  z-index: 2;
  width: 100%;
  height: calc(100% - 70px);
  pointer-events: none;
}

.neural-hero .engine-shell {
  grid-template-columns: minmax(475px, .88fr) minmax(560px, .98fr);
  gap: clamp(40px, 4.5vw, 86px);
}

.neural-hero .engine-copy h1 {
  max-width: 710px;
  font-size: clamp(64px, 6.2vw, 105px);
}

.neural-stage {
  --web-x: 0px;
  --web-y: 0px;
  position: relative;
  z-index: 4;
  justify-self: end;
  width: min(100%, 650px);
  aspect-ratio: 1;
  transform: translate3d(var(--web-x), var(--web-y), 0);
  transition: transform .32s ease-out;
}

.neural-stage::before {
  content: "";
  position: absolute;
  inset: 5%;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, rgba(164,42,54,.14) 0 3%, transparent 4% 24%, rgba(164,42,54,.04) 25% 26%, transparent 27% 100%),
    repeating-radial-gradient(circle at center, transparent 0 54px, rgba(255,255,255,.035) 55px 56px);
  box-shadow: inset 0 0 100px rgba(0,0,0,.56), 0 0 90px rgba(164,42,54,.06);
}

.neural-stage::after {
content: var(--i18n-system-graph,"SYSTEM GRAPH / 10 NODES / LIVE");
  position: absolute;
  top: 3%;
  right: 2%;
  color: rgba(255,255,255,.28);
  font: 600 7px/1 var(--mono);
  letter-spacing: .11em;
}

.web-scan {
  position: absolute;
  z-index: 1;
  inset: 7%;
  border-radius: 50%;
  background: conic-gradient(from 10deg, transparent 0 74%, rgba(164,42,54,.14) 82%, transparent 91%);
  animation: web-scan-spin 8s linear infinite;
}

.web-orbit {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  aspect-ratio: 1;
  border: 1px dashed rgba(255,255,255,.09);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.orbit-a { width: 82%; animation: web-orbit 34s linear infinite; }
.orbit-b { width: 58%; border-color: rgba(164,42,54,.14); animation: web-orbit-reverse 26s linear infinite; }
.orbit-c { width: 34%; border-style: solid; border-color: rgba(255,255,255,.08); animation: web-breathe 3.4s ease-in-out infinite; }

.neural-hub {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 50%;
  width: 130px;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 42% 32%, #56161e, #2f0d12 50%, #070708 78%);
  box-shadow: 0 0 0 9px rgba(164,42,54,.04), 0 0 46px rgba(164,42,54,.34), inset 0 0 32px rgba(164,42,54,.17);
  animation: web-hub-float 3.8s ease-in-out infinite;
}

.neural-hub::before,
.neural-hub::after {
  content: "";
  position: absolute;
  inset: -14px;
  border: 1px solid rgba(164,42,54,.3);
  border-radius: 50%;
  animation: web-hub-pulse 2.5s ease-out infinite;
}

.neural-hub::after { animation-delay: -1.25s; }

.neural-hub > span {
  color: var(--web-red-hot);
  font-size: 52px;
  line-height: .73;
  font-weight: 800;
  letter-spacing: -.09em;
  text-shadow: 0 0 22px rgba(164,42,54,.7);
}

.neural-hub strong {
  margin-top: 12px;
  color: rgba(255,255,255,.8);
  text-align: center;
  font: 700 7px/1.3 var(--mono);
  letter-spacing: .17em;
}

.neural-hub small {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
  color: rgba(255,255,255,.38);
  font: 600 5px/1 var(--mono);
}

.neural-hub small i,
.web-card span i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #39dc83;
  box-shadow: 0 0 9px #39dc83;
}

.web-node {
  appearance: none;
  position: absolute;
  z-index: 8;
  min-width: 80px;
  padding: 9px 10px 8px 25px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(7,7,8,.89);
  color: var(--web-white);
  text-align: left;
  transform: translate(-50%, -50%);
  box-shadow: 0 9px 30px rgba(0,0,0,.42);
  cursor: pointer;
  transition: border-color .25s, background .25s, box-shadow .25s, transform .25s;
  animation: web-node-drift 3.8s ease-in-out infinite;
}

.web-node::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid transparent;
  pointer-events: none;
}

.web-node > i {
  position: absolute;
  left: 10px;
  top: 50%;
  width: 7px;
  height: 7px;
  border: 1px solid var(--web-red-hot);
  border-radius: 50%;
  transform: translateY(-50%);
  background: #2f0d12;
  box-shadow: 0 0 12px rgba(164,42,54,.8);
}

.web-node b {
  display: block;
  font: 700 8px/1 var(--mono);
  letter-spacing: .06em;
}

.web-node small {
  display: block;
  margin-top: 4px;
  color: rgba(255,255,255,.34);
  font: 600 5px/1 var(--mono);
  letter-spacing: .08em;
}

.web-node:hover,
.web-node:focus-visible,
.web-node.is-active {
  outline: none;
  border-color: rgba(193,100,109,.72);
  background: rgba(47,13,18,.94);
  box-shadow: 0 0 0 3px rgba(164,42,54,.07), 0 12px 35px rgba(0,0,0,.5), 0 0 23px rgba(164,42,54,.16);
  transform: translate(-50%, -50%) scale(1.055);
}

.web-node:hover::before,
.web-node:focus-visible::before,
.web-node.is-active::before { border-color: rgba(164,42,54,.22); }

.node-idea { left: 15%; top: 48%; animation-delay: -.2s; }
.node-strategy { left: 23%; top: 18%; animation-delay: -1.1s; }
.node-design { left: 48%; top: 8%; animation-delay: -2.2s; }
.node-web { left: 74%; top: 18%; animation-delay: -.7s; }
.node-mobile { left: 89%; top: 38%; animation-delay: -2.8s; }
.node-ai { left: 87%; top: 68%; animation-delay: -1.5s; }
.node-data { left: 66%; top: 88%; animation-delay: -.4s; }
.node-security { left: 39%; top: 91%; animation-delay: -2.5s; }
.node-cloud { left: 15%; top: 73%; animation-delay: -1.8s; }
.node-automation { left: 49%; top: 70%; animation-delay: -3.1s; }

.web-card,
.web-readout {
  position: absolute;
  z-index: 9;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(7,7,8,.91);
  backdrop-filter: blur(15px);
  box-shadow: 0 18px 46px rgba(0,0,0,.46);
}

.web-card {
  width: 166px;
  padding: 13px;
}

.card-input { left: -2%; top: 35%; }
.card-output { right: -4%; top: 49%; border-color: rgba(164,42,54,.46); }

.web-card small,
.web-readout span,
.web-readout small {
  display: block;
  color: rgba(255,255,255,.34);
  font: 600 6px/1 var(--mono);
  letter-spacing: .08em;
}

.web-card b {
  display: block;
  margin: 8px 0 11px;
  font-size: 11px;
}

.web-card > span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,.48);
  font: 600 6px/1 var(--mono);
}

.web-readout {
  left: 4%;
  bottom: 4%;
  width: 138px;
  padding: 11px 12px;
}

.web-readout b {
  display: block;
  margin: 7px 0;
  color: var(--web-red-hot);
  font: 700 16px/1 var(--mono);
  text-shadow: 0 0 12px rgba(164,42,54,.5);
}

.project-tech-badge {
  position: absolute;
  z-index: 3;
  left: 18px;
  top: 18px;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.5);
  background: rgba(7,7,8,.82);
  color: #fff;
  font: 700 8px/1 var(--mono);
  letter-spacing: .08em;
  backdrop-filter: blur(10px);
}

.project-tech-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--web-red-hot);
  box-shadow: 0 0 10px var(--web-red);
}

.project-tech-badge.static {
  position: relative;
  left: auto;
  top: auto;
  margin: 22px 0 12px;
  border-color: rgba(255,255,255,.35);
}

@keyframes web-scan-spin { to { transform: rotate(360deg); } }
@keyframes web-orbit { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes web-orbit-reverse { to { transform: translate(-50%,-50%) rotate(-360deg); } }
@keyframes web-breathe { 50% { transform: translate(-50%,-50%) scale(1.06); opacity: .55; } }
@keyframes web-hub-float { 50% { transform: translate(-50%,-53%); } }
@keyframes web-hub-pulse { 0% { transform: scale(.8); opacity: .7; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes web-node-drift { 50% { margin-top: -5px; } }

@media (max-width: 1180px) {
  .neural-hero .engine-shell { grid-template-columns: minmax(410px,.88fr) minmax(480px,1fr); }
  .neural-stage { width: min(100%, 560px); }
  .web-card { display: none; }
  .neural-hero .engine-copy h1 { font-size: clamp(58px,6.1vw,86px); }
}

@media (max-width: 940px) {
  .neural-hero .engine-shell { grid-template-columns: 1fr; padding-top: 72px; }
  .neural-hero .engine-copy { max-width: 760px; }
  .neural-stage { justify-self: center; width: min(92vw, 600px); }
  #neural-web-canvas { inset: 0; height: 100%; }
}

@media (max-width: 640px) {
  .neural-hero .engine-shell { padding: 65px 0 90px; }
  .neural-hero .engine-copy h1 { font-size: clamp(49px,15vw,69px); line-height: .88; }
  .neural-stage { width: min(112vw, 520px); margin-left: -6vw; }
  .web-node { min-width: 68px; padding: 7px 8px 7px 21px; }
  .web-node > i { left: 8px; }
  .web-node b { font-size: 6px; }
  .web-node small { display: none; }
  .neural-hub { width: 105px; }
  .neural-hub > span { font-size: 43px; }
  .web-readout,
  .neural-stage::after { display: none; }
  .engine-proof > span { min-width: 112px; }
  .project-tech-badge { left: 12px; top: 12px; min-height: 27px; padding: 0 9px; font-size: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .web-scan,
  .web-orbit,
  .neural-hub,
  .neural-hub::before,
  .neural-hub::after,
  .web-node { animation-duration: 18s !important; }
  .neural-stage { transition: none; }
}

/* V5.1 — literal spider-web hero */
#spider-web-canvas {
  position: absolute;
  inset: 0 0 70px;
  z-index: 2;
  width: 100%;
  height: calc(100% - 70px);
  pointer-events: none;
}

.spider-stage {
  --spider-x: 0px;
  --spider-y: 0px;
  position: relative;
  z-index: 4;
  justify-self: end;
  width: min(100%, 660px);
  aspect-ratio: 1;
  transform: translate3d(var(--spider-x), var(--spider-y), 0);
  transition: transform .3s ease-out;
}

.spider-stage::before {
content: var(--i18n-spider-web,"SPIDER WEB / DIGITAL STRUCTURE");
  position: absolute;
  z-index: 5;
  right: 1%;
  top: 2%;
  color: rgba(255,255,255,.3);
  font: 600 7px/1 var(--mono);
  letter-spacing: .12em;
}

.spider-stage::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 3%;
  border-radius: 50%;
  background: radial-gradient(circle at 52% 48%, rgba(164,42,54,.14), transparent 12%, rgba(164,42,54,.035) 32%, transparent 67%);
  box-shadow: inset 0 0 90px rgba(0,0,0,.5);
}

.spider-glow {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 48%;
  width: 42%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(164,42,54,.18), transparent 68%);
  filter: blur(20px);
  animation: spider-glow-pulse 3.4s ease-in-out infinite;
}

.spider-center {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 48%;
  width: 88px;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle at 42% 34%, #56161e, #2f0d12 53%, #070708 79%);
  box-shadow: 0 0 0 8px rgba(164,42,54,.04), 0 0 42px rgba(164,42,54,.46), inset 0 0 26px rgba(164,42,54,.2);
  animation: spider-center-pulse 2.8s ease-in-out infinite;
}

.spider-center span {
  color: #c1646d;
  font-size: 42px;
  line-height: .75;
  font-weight: 800;
  letter-spacing: -.1em;
  text-shadow: 0 0 18px rgba(164,42,54,.75);
}

.spider-center small {
  margin-top: 9px;
  color: rgba(255,255,255,.54);
  font: 700 5px/1 var(--mono);
  letter-spacing: .12em;
}

.strand-tag {
  position: absolute;
  z-index: 8;
  min-width: 90px;
  padding: 8px 10px 8px 25px;
  border-left: 1px solid rgba(193,100,109,.75);
  background: linear-gradient(90deg, rgba(47,13,18,.88), rgba(7,7,8,.55));
  color: #fff;
  backdrop-filter: blur(8px);
  animation: strand-tag-float 4s ease-in-out infinite;
}

.strand-tag > i {
  position: absolute;
  left: 9px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: #c1646d;
  box-shadow: 0 0 11px #a42a36;
}

.strand-tag b {
  display: block;
  font: 700 7px/1 var(--mono);
  letter-spacing: .07em;
}

.strand-tag small {
  display: block;
  margin-top: 4px;
  color: rgba(255,255,255,.33);
  font: 600 5px/1 var(--mono);
}

.tag-strategy { left: 7%; top: 19%; animation-delay: -.6s; }
.tag-design { left: 42%; top: 4%; animation-delay: -1.8s; }
.tag-web { right: 2%; top: 20%; animation-delay: -2.7s; }
.tag-mobile { right: -1%; bottom: 20%; animation-delay: -1.1s; }
.tag-ai { left: 46%; bottom: 2%; animation-delay: -2.2s; }
.tag-security { left: 2%; bottom: 22%; animation-delay: -.2s; }

.spider-status,
.spider-caption {
  position: absolute;
  z-index: 9;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(7,7,8,.88);
  backdrop-filter: blur(12px);
  box-shadow: 0 14px 38px rgba(0,0,0,.42);
}

.spider-status {
  right: 1%;
  top: 43%;
  width: 145px;
  padding: 11px 12px;
}

.spider-status span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,.55);
  font: 600 6px/1 var(--mono);
}

.spider-status span i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #39dc83;
  box-shadow: 0 0 8px #39dc83;
}

.spider-status b {
  display: block;
  margin: 8px 0 6px;
  color: #c1646d;
  font: 700 16px/1 var(--mono);
  text-shadow: 0 0 12px rgba(164,42,54,.6);
}

.spider-status small {
  color: rgba(255,255,255,.29);
  font: 600 5px/1 var(--mono);
}

.spider-caption {
  left: 3%;
  top: 45%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font: 700 6px/1 var(--mono);
}

.spider-caption span { color: rgba(255,255,255,.4); }
.spider-caption i { color: #c1646d; font-style: normal; }
.spider-caption strong { color: #fff; font-size: 6px; }

.code-spider {
  position: absolute;
  z-index: 12;
  left: 50%;
  top: 48%;
  width: 26px;
  height: 22px;
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(193,100,109,.95));
  transform: translate(-50%,-50%);
  will-change: left, top, transform;
}

.code-spider b,
.code-spider span {
  position: absolute;
  left: 50%;
  border-radius: 50%;
  transform: translateX(-50%);
  background: #c1646d;
}

.code-spider b { top: 7px; width: 11px; height: 12px; }
.code-spider span { top: 2px; width: 8px; height: 8px; box-shadow: inset 0 -2px 0 rgba(0,0,0,.25); }

.code-spider > i {
  position: absolute;
  left: 50%;
  top: 10px;
  width: 24px;
  height: 1px;
  background: #c1646d;
  transform-origin: center;
}

.code-spider > i:nth-child(1) { transform: translateX(-50%) rotate(18deg); }
.code-spider > i:nth-child(2) { transform: translateX(-50%) rotate(-18deg); }
.code-spider > i:nth-child(3) { transform: translateX(-50%) rotate(47deg); }
.code-spider > i:nth-child(4) { transform: translateX(-50%) rotate(-47deg); }

@keyframes spider-glow-pulse { 50% { opacity: .58; transform: translate(-50%,-50%) scale(1.16); } }
@keyframes spider-center-pulse { 50% { box-shadow: 0 0 0 13px rgba(164,42,54,.025),0 0 55px rgba(164,42,54,.55),inset 0 0 30px rgba(164,42,54,.24); } }
@keyframes strand-tag-float { 50% { margin-top: -4px; } }

@media (max-width: 1180px) {
  .spider-stage { width: min(100%, 570px); }
  .spider-status,
  .spider-caption { display: none; }
}

@media (max-width: 940px) {
  .spider-stage { justify-self: center; width: min(92vw, 610px); }
  #spider-web-canvas { inset: 0; height: 100%; }
}

@media (max-width: 640px) {
  .spider-stage { width: min(116vw, 530px); margin-left: -8vw; }
  .spider-stage::before { display: none; }
  .spider-center { width: 72px; }
  .spider-center span { font-size: 34px; }
  .strand-tag { min-width: 66px; padding: 7px 7px 7px 19px; }
  .strand-tag > i { left: 7px; width: 5px; height: 5px; }
  .strand-tag b { font-size: 5px; }
  .strand-tag small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .spider-stage { transition: none; }
  .spider-glow,
  .spider-center,
  .strand-tag { animation-duration: 18s !important; }
}