.tornado-page { --pixel-green: #5dcb28; --pixel-purple: #532065; }
.tornado-page .case-hero h1 span { color: var(--lime); }
.tornado-cover { position: relative; min-height: min(68vw, 900px); overflow: hidden; background: #080908; }
.tornado-cover video { width: 100%; height: 100%; min-height: inherit; object-fit: cover; }
.pixel-caption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; gap: 22px; padding: 22px; background: rgba(11,13,12,.9); font: 600 clamp(20px, 3vw, 44px) "IBM Plex Mono", monospace; }
.pixel-caption i { color: var(--orange); font-style: normal; }
.chase { background: #171a18; }
.chase > h2, .network h2, .tornado-tech h2, .onsite h2 { max-width: 1050px; margin: 26px 0 70px; font-size: clamp(48px, 7vw, 104px); line-height: .9; letter-spacing: -.06em; }
.chase > h2 span { color: var(--lime); }
.chase-grid { display: grid; grid-template-columns: 1fr .7fr 1fr; border: 1px solid var(--line); }
.chase-grid article { min-height: 390px; padding: clamp(30px, 4vw, 60px); }
.chase-grid article:first-child { border-right: 1px solid var(--line); }
.chase-grid article:last-child { border-left: 1px solid var(--line); }
.chase-grid article b { color: var(--lime); font: 600 54px "IBM Plex Mono", monospace; }
.chase-grid h3 { margin: 80px 0 20px; font-size: clamp(28px, 3vw, 44px); }
.chase-grid p, .chase-note, .network-copy p, .tech-copy p, .onsite-copy > p:not(.kicker) { color: #b8bdb9; font-size: 18px; line-height: 1.6; }
.countdown { display: flex; justify-content: center; align-items: center; position: relative; background: var(--lime); color: var(--black); font: 700 clamp(42px, 6vw, 90px) "IBM Plex Mono", monospace; }
.countdown i { color: var(--orange); font-style: normal; animation: blink 1s steps(1) infinite; }
.countdown small { position: absolute; bottom: 28px; font: 10px "IBM Plex Mono", monospace; text-transform: uppercase; }
@keyframes blink { 50% { opacity: 0; } }
.chase-note { max-width: 760px; margin: 42px 0 0 auto; }
.network { background: var(--black); }
.network-heading { display: grid; grid-template-columns: .5fr 1.5fr; gap: 5vw; }
.network-map { display: grid; grid-template-columns: 1fr auto .65fr auto .65fr; gap: 24px; align-items: center; padding: clamp(30px, 5vw, 70px); border: 1px solid var(--line); }
.phones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.phones span, .screen, .server { display: grid; place-items: center; min-height: 90px; border: 1px solid #4b504c; font: 10px "IBM Plex Mono", monospace; }
.motion-ready .network-map .phones span, .motion-ready .network-map .server, .motion-ready .network-map .screen { opacity:.24; transition:.45s ease; }
.motion-ready .network-map.sequence-active .phones span { opacity:1; border-color:var(--lime); box-shadow:inset 0 0 24px rgba(215,255,63,.06); }
.motion-ready .network-map.sequence-active .phones span:nth-child(2){transition-delay:.08s}.motion-ready .network-map.sequence-active .phones span:nth-child(3){transition-delay:.16s}.motion-ready .network-map.sequence-active .phones span:nth-child(4){transition-delay:.24s}.motion-ready .network-map.sequence-active .phones span:nth-child(5){transition-delay:.32s}.motion-ready .network-map.sequence-active .phones span:nth-child(6){transition-delay:.4s}
.motion-ready .network-map.sequence-active .server { opacity:1; border-color:var(--orange); transition-delay:.58s; }
.motion-ready .network-map.sequence-active .screen { opacity:1; border-color:var(--lime); transition-delay:.9s; }
.server { min-height: 230px; text-align: center; }
.server img { width: 64px; margin-bottom: 20px; filter: brightness(0) invert(1); }
.server span, .screen span { margin-top: 8px; color: var(--gray); }
.connection { display: flex; align-items: center; min-width: 90px; color: var(--lime); font: 9px "IBM Plex Mono", monospace; }
.connection i { flex: 1; height: 1px; background: var(--lime); }
.motion-ready .connection i { transform:scaleX(0); transition:transform .55s ease; }
.motion-ready .network-map.sequence-active .connection i { transform:scaleX(1); transition-delay:.48s; }
.motion-ready .network-map.sequence-active .connection:nth-of-type(4) i { transition-delay:.78s; }
.network-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 7vw; max-width: 1000px; margin: 55px 0 0 auto; }
.tornado-tech { display: grid; grid-template-columns: .9fr 1.1fr; padding: 0; background: var(--pixel-purple); }
.tech-video { position: relative; min-height: 780px; background: #090a09; }
.tech-video video { width: 100%; height: 100%; object-fit: contain; }
.tech-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(45px, 7vw, 100px); }
.tech-copy h2 { margin: 24px 0 35px; }
.tech-copy ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 32px 0 0; padding: 0; }
.tech-copy li { border: 1px solid rgba(255,255,255,.35); padding: 9px 11px; font: 10px "IBM Plex Mono", monospace; text-transform: uppercase; }
.onsite { background: var(--warm); color: var(--black); display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; }
.onsite-copy h2 { margin-bottom: 38px; }
.onsite-copy > p:not(.kicker) { color: #525752; }
.onsite-image img { width: 100%; max-height: 760px; object-fit: cover; }
.onsite-video { position:relative; min-height:680px; overflow:hidden; background:#111; }
.onsite-video video { width:100%; height:100%; min-height:680px; object-fit:contain; background:radial-gradient(circle at center,#30342f,#090a09 70%); }
.operation-list { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; border-top: 1px solid #b8bbb6; }
.operation-list li { display: grid; grid-template-columns: 80px 1fr; padding: 22px 0; border-bottom: 1px solid #b8bbb6; font-size: clamp(18px, 2vw, 26px); }
.operation-list span { color: var(--orange); font: 11px "IBM Plex Mono", monospace; }
@media (max-width: 850px) {
  .chase-grid, .network-heading, .network-copy, .tornado-tech, .onsite { grid-template-columns: 1fr; }
  .chase-grid article:first-child, .chase-grid article:last-child { border: 0; border-bottom: 1px solid var(--line); }
  .countdown { min-height: 220px; }
  .network-map { grid-template-columns: 1fr; }
  .connection { min-height: 80px; flex-direction: column; }
  .connection i { width: 1px; min-height: 30px; }
  .phones { grid-template-columns: repeat(2, 1fr); }
  .tech-video { min-height: 600px; }
  .operation-list { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) { html:not(.force-motion) .countdown i { animation: none; } }