.brand-symbol {
  display: block;
  width: 38px;
  height: 34px;
  overflow: hidden;
  position: relative;
  flex: 0 0 38px;
}

.brand-symbol img {
  position: absolute;
  height: 34px;
  width: auto;
  max-width: none;
  left: 0;
  top: 0;
  filter: brightness(0) saturate(100%) invert(77%) sepia(46%) saturate(732%) hue-rotate(116deg) brightness(91%) contrast(91%);
}

.hero-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 430px);
  gap: 5vw;
  align-items: center;
  position: relative;
  z-index: 2;
}

.hero-message { min-width: 0; }
.hero-main h1 {
  font-size: clamp(46px, 5.5vw, 78px);
  letter-spacing: -4px;
  max-width: 850px;
}

.chaos-visual {
  margin: 0;
  position: relative;
  width: 100%;
  align-self: center;
}

.chaos-frame {
  height: auto;
  aspect-ratio: 2234 / 1180;
  overflow: hidden;
  border: 0;
  background: #03111f;
  box-shadow: none;
  position: relative;
}

.hero::after { right: -3%; }

.chaos-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 19, 31, .16), transparent 45%, rgba(54, 215, 183, .07));
  pointer-events: none;
}

.chaos-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  animation: none;
}

.motion-layer { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.chaos-particles { position: absolute; inset: 10% auto 12% 2%; width: 18%; }
.chaos-particles b { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #78efe0; box-shadow: 0 0 6px currentColor; opacity: .8; animation: particle-chaos 3.8s ease-in-out infinite alternate; }
.chaos-particles b:nth-child(1){left:12%;top:8%;animation-delay:-.4s}.chaos-particles b:nth-child(2){left:62%;top:14%;animation-delay:-1.6s;background:#c975ff}.chaos-particles b:nth-child(3){left:38%;top:25%;animation-delay:-2.1s;background:#fff176}.chaos-particles b:nth-child(4){left:80%;top:34%;animation-delay:-.9s}.chaos-particles b:nth-child(5){left:18%;top:43%;animation-delay:-2.8s;background:#55aaff}.chaos-particles b:nth-child(6){left:53%;top:50%;animation-delay:-1.1s;background:#ff67c8}.chaos-particles b:nth-child(7){left:75%;top:61%;animation-delay:-3.2s;background:#b5ff62}.chaos-particles b:nth-child(8){left:28%;top:70%;animation-delay:-1.9s}.chaos-particles b:nth-child(9){left:91%;top:79%;animation-delay:-.2s;background:#fff176}.chaos-particles b:nth-child(10){left:48%;top:87%;animation-delay:-2.5s;background:#c975ff}.chaos-particles b:nth-child(11){left:8%;top:92%;animation-delay:-1.3s;background:#55aaff}.chaos-particles b:nth-child(12){left:68%;top:95%;animation-delay:-3.5s;background:#ff67c8}

.stream-lines { position:absolute; inset:0; width:100%; height:100%; overflow:visible; opacity:.74; }
.stream-lines path { fill:none; stroke-width:3.5; stroke-linecap:round; stroke-dasharray:3 8; animation:string-flow 5.6s linear infinite; }
.stream-lines .lime { stroke:#b4ff24; filter:drop-shadow(0 0 4px rgba(180,255,36,.85)); }
.stream-lines .blue { stroke:#28c8ff; filter:drop-shadow(0 0 4px rgba(40,200,255,.85)); animation-duration:6.4s; }
.stream-lines path:nth-child(2){animation-delay:-1.4s}.stream-lines path:nth-child(3){animation-delay:-2.7s}.stream-lines path:nth-child(4){animation-delay:-.8s}.stream-lines path:nth-child(5){animation-delay:-3.9s}.stream-lines path:nth-child(6){animation-delay:-2.1s}.stream-lines path:nth-child(7){animation-delay:-4.6s}.stream-lines path:nth-child(8){animation-delay:-3.2s}

.flow-pulse { position: absolute; left: 16%; width: 7px; height: 3px; border-radius: 50%; background: #aaff21; box-shadow: 0 0 8px #aaff21, 0 0 15px rgba(170,255,33,.55); opacity: 0; animation: stream-flow 4.8s linear infinite; }
.flow-1{top:34%;--dy:-4px;animation-delay:-.2s}.flow-2{top:43%;--dy:12px;animation-delay:-1.1s;background:#1cbfff;box-shadow:0 0 8px #1cbfff,0 0 15px rgba(28,191,255,.55)}.flow-3{top:52%;--dy:-8px;animation-delay:-2.3s}.flow-4{top:61%;--dy:8px;animation-delay:-3.2s;background:#1cbfff;box-shadow:0 0 8px #1cbfff,0 0 15px rgba(28,191,255,.55)}.flow-5{top:70%;--dy:-14px;animation-delay:-4.1s}

.context-pulse { position: absolute; width: 9.5%; height: 16%; left: 43.1%; border-radius: 13%; opacity: 0; transform: scale(.82); mix-blend-mode: screen; outline: 1px solid currentColor; outline-offset: -2px; }
.context-pulse::after { content:""; position:absolute; inset:-42%; border-radius:50%; background:radial-gradient(circle,currentColor 0,rgba(255,255,255,.32) 16%,transparent 66%); opacity:.7; }
.context-1{top:19.5%;color:#b9ff31;animation:context-one 7.2s ease-in-out infinite}.context-2{top:37%;color:#21d8ff;animation:context-two 7.2s ease-in-out infinite}.context-3{top:55%;color:#ffe337;animation:context-three 7.2s ease-in-out infinite}
.clarity-pulse { position: absolute; width: 39%; height: 61%; right: 8%; top: 18%; border-radius: 38%; background:radial-gradient(ellipse,rgba(255,255,255,.62) 0,rgba(223,123,255,.55) 16%,rgba(93,134,255,.42) 38%,rgba(120,239,224,.24) 56%,transparent 76%); opacity: 0; mix-blend-mode:screen; animation:clarity-converge 7.2s ease-in-out infinite; }

.chaos-visual figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  color: #8399a7;
  font-size: 9px;
  letter-spacing: 1.7px;
}

.chaos-visual figcaption i { font-style: normal; color: var(--mint); }

@keyframes particle-chaos { 0%{transform:translate(-5px,4px) scale(.75);opacity:.35}35%{transform:translate(7px,-6px) scale(1.25);opacity:1}70%{transform:translate(-3px,-9px) scale(.9);opacity:.55}100%{transform:translate(9px,5px) scale(1.1);opacity:.85} }
@keyframes string-flow { from{stroke-dashoffset:22} to{stroke-dashoffset:0} }
@keyframes stream-flow { 0%{transform:translate(0,0) scale(.55);opacity:0}12%{opacity:1}78%{opacity:.9}100%{transform:translate(155px,var(--dy)) scale(1.15);opacity:0} }
@keyframes context-one { 0%,5%{opacity:0;transform:scale(.82)}12%{opacity:.9;transform:scale(1.18);box-shadow:0 0 18px currentColor}20%{opacity:.25;transform:scale(1)}32%,100%{opacity:0;transform:scale(.9)} }
@keyframes context-two { 0%,25%{opacity:0;transform:scale(.82)}32%{opacity:.9;transform:scale(1.18);box-shadow:0 0 18px currentColor}40%{opacity:.25;transform:scale(1)}52%,100%{opacity:0;transform:scale(.9)} }
@keyframes context-three { 0%,45%{opacity:0;transform:scale(.82)}52%{opacity:.9;transform:scale(1.18);box-shadow:0 0 18px currentColor}60%{opacity:.25;transform:scale(1)}72%,100%{opacity:0;transform:scale(.9)} }
@keyframes clarity-converge { 0%,66%{opacity:0;transform:scale(.84);filter:brightness(1)}74%{opacity:1;transform:scale(1.04);filter:brightness(1.85);box-shadow:0 0 34px rgba(172,137,255,.75)}84%{opacity:.52;transform:scale(1);filter:brightness(1.35)}93%{opacity:.94;transform:scale(1.035);filter:brightness(1.7);box-shadow:0 0 30px rgba(120,239,224,.65)}100%{opacity:0;transform:scale(1.08);filter:brightness(1)} }

@media (prefers-reduced-motion: reduce) {
  .chaos-particles b,.stream-lines path,.flow-pulse,.context-pulse,.clarity-pulse { animation: none; }
  .chaos-particles b { opacity: .55; }
  .clarity-pulse { opacity: .18; }
}

@media (max-width: 1000px) {
  .hero-main { grid-template-columns: 1fr; }
  .chaos-visual { width: min(560px, 100%); margin-top: 34px; }
  .chaos-frame { height: auto; }
  .risk-chain { position: relative; left: auto; right: auto; bottom: auto; margin-top: 62px; }
}

@media (max-width: 600px) {
  .chaos-frame { height: auto; }
  .chaos-visual figcaption { letter-spacing: 1.1px; }
  .hero-main h1 { letter-spacing: -2.7px; }
}