/* Wow layer: hero canvas, rotator, live demo, spotlight, network */
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-inner, .trust { z-index: 1; }

.rotator { display: inline-block; transition: opacity .35s ease, transform .35s ease, filter .35s ease; }
.rotator.out { opacity: 0; transform: translateY(12px); filter: blur(6px); }

/* 3D tilt + live demo */
.hero-visual { perspective: 1400px; }
.ui-main { transform: rotateY(var(--ry, -6deg)) rotateX(var(--rx, 3deg)); transition: transform .25s ease-out; }
.ui-main .ui-search, .ui-main #demoRows { transition: opacity .35s ease, transform .35s ease; }
.ui-main.swap .ui-search, .ui-main.swap #demoRows { opacity: 0; transform: translateY(8px); }
.ui-float.f1 { transition: opacity .4s ease; }
.ui-float.f1.hide { opacity: 0; }
.ui-chart path:last-of-type { stroke-dasharray: 420; stroke-dashoffset: 420; animation: draw 2.4s .4s ease forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Cursor spotlight */
.spot { position: relative; }
.spot::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s ease; background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(91,147,255,.16), transparent 62%); border-radius: inherit; }
.spot:hover::before { opacity: 1; }
.step.spot::before { background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(127,169,255,.2), transparent 62%); }

/* Network section */
.network { overflow: hidden; }
.net-glow { position: absolute; left: 50%; top: 50%; width: 900px; height: 900px; margin: -450px 0 0 -100px; border-radius: 50%; background: radial-gradient(circle, rgba(47,109,246,.22), transparent 62%); pointer-events: none; }
.net-inner { position: relative; display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; }
.net-copy h2 { color: #fff; font-size: clamp(1.9rem, 3.8vw, 2.9rem); font-weight: 700; }
.net-copy > p { margin-top: 20px; color: #a3b4cf; font-size: 1.05rem; }
.net-info { display: flex; align-items: center; gap: 18px; margin-top: 32px; padding: 20px 22px; border-radius: var(--r); background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.14); min-height: 116px; transition: opacity .25s ease; }
.net-info.swap { opacity: .25; }
.net-info img { width: 84px; height: 56px; object-fit: contain; background: #fff; border-radius: 12px; padding: 6px 10px; flex-shrink: 0; }
.net-info .tag { color: #7fa9ff; }
.net-info strong { display: block; color: #fff; font-family: var(--fdisp); font-size: 1.15rem; margin: 2px 0; }
.net-info p { color: #a3b4cf; font-size: .9rem; line-height: 1.5; }

.net-stage { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1; margin: 0 auto; }
.net-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ring { fill: none; stroke: rgba(127,169,255,.28); stroke-width: .25; stroke-dasharray: 1 1.6; transform-origin: 50px 50px; }
.ring-1 { animation: spin 90s linear infinite; }
.ring-2 { stroke: rgba(127,169,255,.16); animation: spin 60s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.link { stroke: rgba(127,169,255,.35); stroke-width: .3; transition: stroke .25s ease, stroke-width .25s ease; }
.link.on { stroke: #7fa9ff; stroke-width: .6; }
.pulse { fill: #7fc0ff; filter: drop-shadow(0 0 1.6px #5b93ff); }
.hub { position: absolute; left: 50%; top: 50%; width: 32%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; box-shadow: 0 0 0 10px rgba(91,147,255,.14), 0 0 0 22px rgba(91,147,255,.07), 0 30px 60px -20px rgba(0,0,0,.6); animation: breathe 4s ease-in-out infinite; }
.hub img { position: absolute; left: 50%; top: 50%; width: 84%; height: auto; transform: translate(-50%, -50%); }
@keyframes breathe { 50% { box-shadow: 0 0 0 14px rgba(91,147,255,.2), 0 0 0 32px rgba(91,147,255,.05), 0 30px 60px -20px rgba(0,0,0,.6); } }
.node { position: absolute; width: 27%; height: 17%; transform: translate(-50%, -50%); border-radius: 18px; border: 2px solid rgba(255,255,255,.2); background: #fff; padding: 0; cursor: pointer; box-shadow: 0 16px 34px -12px rgba(0,0,0,.6); transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .25s ease, box-shadow .25s ease; }
.node img { position: absolute; left: 10%; top: 12%; width: 80%; height: 76%; object-fit: contain; }
.node:hover, .node.active, .node:focus-visible { transform: translate(-50%, -50%) scale(1.18); border-color: #5b93ff; box-shadow: 0 0 0 8px rgba(91,147,255,.25), 0 20px 40px -12px rgba(0,0,0,.7); z-index: 2; }

@media (max-width: 1080px) {
  .net-inner { grid-template-columns: 1fr; gap: 48px; }
  .net-glow { margin-left: -450px; }
}
@media (max-width: 600px) {
  .net-info { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-chart path:last-of-type { stroke-dashoffset: 0; }
  .pulse { display: none; }
  .rotator { transition: none; }
}