/* "How integration works" — endless tunnel scroll story */
.tunnel-on .approach-grid { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.tunnel-on#approach { padding-top: 0; padding-bottom: 0; }
.tun-track { position: relative; height: calc(var(--stages, 8) * 85vh + 100vh); width: 100vw; margin-left: calc(50% - 50vw); }
.tun-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #070821; isolation: isolate; }
.tun-pin canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tun-pin::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(7,8,33,.75) 100%), linear-gradient(180deg, #070821 0, transparent 14%, transparent 80%, rgba(7,8,33,.85) 100%); }
.tun-copy { position: absolute; z-index: 2; left: clamp(20px, 5vw, 72px); bottom: clamp(36px, 9vh, 96px); max-width: min(720px, 86vw); color: #fff; }
.tun-copy::before { content: ""; position: absolute; inset: -90px -140px -70px -160px; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(7,8,33,.88), rgba(7,8,33,.55) 55%, rgba(7,8,33,0)); }
.tun-title, .tun-text { text-shadow: 0 2px 24px rgba(7,8,33,.8); }
.tun-kicker { font-family: var(--mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #ff9a4d; }
.tun-title { font-family: var(--display); font-weight: 600; font-size: clamp(64px, 11vw, 176px); line-height: .95; letter-spacing: -.045em; margin: 10px 0 0; text-wrap: balance; }
.tun-title.is-intro { font-size: clamp(44px, 6.4vw, 96px); font-weight: 700; line-height: 1.02; }
.tun-text { margin-top: 18px; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.55; color: rgba(236,236,255,.86); max-width: 560px; }
.tun-cta { margin-top: 26px; }
.tun-swap .tun-kicker, .tun-swap .tun-title, .tun-swap .tun-text { animation: tun-in .9s var(--fx-ease, cubic-bezier(.2,.7,.1,1)) both; }
.tun-swap .tun-title { animation-delay: .05s; } .tun-swap .tun-text { animation-delay: .14s; }
@keyframes tun-in { from { opacity: 0; transform: translateY(36px); filter: blur(8px); } }
.tun-rail { position: absolute; z-index: 2; right: clamp(16px, 3vw, 44px); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 14px; align-items: flex-end; }
.tun-rail span { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.35); transition: color .4s ease; }
.tun-rail span::after { content: ""; width: 14px; height: 2px; border-radius: 2px; background: currentColor; transition: width .5s var(--fx-ease, ease), background .4s ease; }
.tun-rail span.on { color: #fff; } .tun-rail span.on::after { width: 34px; background: linear-gradient(90deg, #ff2bd1, #ff7a1a); }
.tun-rail span b { font-weight: 500; opacity: 0; transform: translateX(6px); transition: opacity .4s ease, transform .4s ease; }
.tun-rail span.on b { opacity: 1; transform: none; }
@media (max-width: 760px) {
  .tun-rail span b { display: none; }
  .tun-rail { gap: 10px; right: 12px; }
  .tun-copy { bottom: 40px; }
}