/* Keep large surfaces neutral black/charcoal. Brand colors belong on small accents and flowing particles. */
/* The original hero is deliberately unchanged. New styles describe only the data-stream story. */
.motion-toggle { border: 0; border-bottom: 1px solid #ffffff35; border-radius: 0; background: transparent; color: #aaaaaa; font: 11px 'DM Sans', sans-serif; padding: 8px 0; cursor: pointer; white-space: nowrap; }
.motion-toggle:hover { color: #f4f4f4; border-color: #2ee6d6; }
.motion-toggle:focus-visible { outline: 2px solid #2ee6d6; outline-offset: 6px; }
.page-motion { position: fixed; right: 18px; bottom: 14px; z-index: 21; font-size: 10px; padding: 7px 10px; color: #aaaaaa; background: #080808e8; border: 1px solid #ffffff16; border-radius: 4px; }
.stream-section { padding: 105px 0 92px; background: #080808; }
.stream-intro { display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: end; }
.stream-intro h2 { margin: 0; font-size: 2.8rem; line-height: 1.06; letter-spacing: -.025em; }
.stream-intro > p { margin: 0; color: var(--muted); font-size: 1.08rem; line-height: 1.7; max-width: 440px; }
.stream-figure { margin: 60px 0 0; }
.stream-scene { height: 410px; position: relative; isolation: isolate; border-top: 1px solid #ffffff16; overflow: hidden; }
#streams-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.stream-sources { position: absolute; top: 10%; bottom: 10%; left: 0; width: 28%; display: grid; grid-template-rows: repeat(3, 1fr); align-items: center; }
.stream-source { display: flex; align-items: center; gap: 18px; background: linear-gradient(90deg, #080808 75%, #08080800); padding-right: 30px; }
.stream-source svg { width: 30px; height: 30px; flex-shrink: 0; fill: none; stroke: #b3b3b3; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.stream-source strong { display: block; font-size: 15px; font-weight: 500; color: #dddddd; }
.stream-source span, .stream-source small { display: block; font-size: 11px; color: #999999; margin-top: 7px; line-height: 1.5; }
.stream-source small { color: #aaaaaa; font-size: 10px; }
.stream-core { position: absolute; top: 50%; left: 52%; transform: translate(-50%, -50%); display: flex; align-items: center; flex-direction: column; justify-content: center; width: 210px; height: 150px; background: radial-gradient(ellipse, #080808 35%, #080808ee 50%, #08080800 72%); }
.stream-core img { width: 156px; height: auto; }
.stream-destination { position: absolute; top: 78%; left: 84%; transform: translateX(-50%); text-align: center; white-space: nowrap; }
.stream-destination strong { display: block; color: #dddddd; font-size: 15px; font-weight: 500; }
.stream-destination span { display: block; color: #aaaaaa; font-size: 11px; margin-top: 8px; }
.stream-principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 42px; padding-top: 42px; border-top: 1px solid #ffffff16; }
.stream-principles h3 { margin: 0 0 12px; font-size: 1.25rem; font-weight: 500; }
.stream-principles p { margin: 0; color: var(--muted); font-size: .93rem; line-height: 1.65; }
@media (max-width: 900px) { .stream-intro { gap: 32px; } .stream-intro h2 { font-size: 2.3rem; } .stream-source { gap: 10px; padding-right: 0; } .stream-source strong { font-size: 13px; } .stream-source small { max-width: 145px; } .stream-core { width: 160px; } .stream-core img { width: 128px; } .stream-principles { gap: 24px; } }
@media (max-width: 640px) {
 .stream-section { padding: 68px 0; }
 .stream-intro { grid-template-columns: 1fr; gap: 24px; }
 .stream-intro h2 { font-size: 2.05rem; }
 .stream-intro > p { font-size: 1rem; }
 .stream-figure { margin-top: 35px; }
 .stream-scene { height: 610px; }
 .stream-sources { top: 26px; left: 0; right: 0; width: 100%; height: 145px; bottom: auto; grid-template-rows: none; grid-template-columns: repeat(3,1fr); align-items: start; gap: 12px; }
 .stream-source { flex-direction: column; text-align: center; gap: 12px; background: none; }
 .stream-source svg { width: 25px; height: 25px; }
 .stream-source strong { font-size: 12px; }
 .stream-source span { font-size: 10px; margin-top: 7px; }
 .stream-source small { font-size: 9px; line-height: 1.5; margin-top: 6px; }
 .stream-core { left: 50%; top: 50%; width: 190px; height: 130px; }
 .stream-core img { width: 145px; }
 .stream-destination { left: 50%; top: 88%; }
 .stream-principles { grid-template-columns: 1fr; gap: 30px; padding-top: 30px; }
 .stream-principles article { padding-left: 18px; border-left: 1px solid #2ee6d636; }
 .stream-principles h3 { margin-top: 10px; }
}