/* Home hero: neural flow (loaded after premium.css) */
@keyframes hf-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes hf-flow { to { stroke-dashoffset: -192; } }
@keyframes hf-ring { 0% { transform: scale(.55); opacity: .8; } 100% { transform: scale(1.5); opacity: 0; } }

.hero-flow { padding-bottom: 3.5rem; }
.hero-flow h1 { max-width: 1100px; font-size: clamp(2.6rem, 5vw, 4.4rem); }
.hero-flow .hero-cta { margin-bottom: 0; }
.hero-flow .btn svg { margin-left: .35rem; vertical-align: -3px; }

.hf-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.hf-dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(20,22,31,.14) 1px, transparent 1.2px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 65%, #000 10%, transparent 75%); mask-image: radial-gradient(ellipse 75% 70% at 50% 65%, #000 10%, transparent 75%); }
.hf-bg .glow { position: absolute; left: 50%; top: 66%; width: 700px; height: 700px; transform: translate(-50%,-50%); background: radial-gradient(circle, rgba(31,91,255,.2), rgba(139,92,246,.08) 45%, transparent 68%); }

.hf-stage { position: relative; max-width: 1240px; height: 460px; margin: 3rem auto 0; }
.hf-beams { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hf-beams path { vector-effect: non-scaling-stroke; stroke-width: 1.5; }
.hf-beams .base path { stroke: rgba(31,91,255,.22); }
.hf-beams .flow path { stroke: #1F5BFF; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 22 170; filter: drop-shadow(0 0 5px rgba(31,91,255,.7)); animation: hf-flow 2.4s linear infinite; }
.hf-beams .flow path:nth-child(2) { animation-delay: -.8s; } .hf-beams .flow path:nth-child(3) { animation-delay: -1.6s; }
.hf-beams .flow path:nth-child(5) { animation-delay: -.4s; } .hf-beams .flow path:nth-child(6) { animation-delay: -1.2s; }

.hf-col { position: absolute; top: 0; bottom: 0; width: 28.5%; display: flex; flex-direction: column; justify-content: space-between; }
.hf-col.l { left: 0; } .hf-col.r { right: 0; }
.hf-card { display: flex; align-items: center; gap: 14px; height: 92px; padding: 0 16px; background: #fff; border: 1px solid var(--border-stone); border-radius: 18px; text-align: left; box-shadow: var(--shadow-card); }
.hf-card i { width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.hf-card i svg { width: 22px; height: 22px; }
.hf-card i.b { background: linear-gradient(135deg,#9bbcff,#4a82ff); } .hf-card i.y { background: linear-gradient(135deg,#ffe29a,#f5a623); }
.hf-card i.p { background: linear-gradient(135deg,#d2b8ff,#8b5cf6); } .hf-card i.g { background: linear-gradient(135deg,#9af0b9,#22b866); }
.hf-card b { display: block; font-size: 15px; color: var(--text-dark); }
.hf-card span { font-size: 12.5px; color: var(--text-dark-muted); }
.hf-card em { margin-left: auto; font-style: normal; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #22c55e; color: #fff; font-size: 13px; font-weight: 800; flex: none; }
.hf-card.ok { border-color: rgba(34,197,94,.35); box-shadow: 0 14px 34px -14px rgba(34,197,94,.35); }

.hf-core { position: absolute; left: 50%; top: 50%; width: 190px; height: 190px; transform: translate(-50%,-50%); display: grid; place-items: center; }
.hf-core .ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(31,91,255,.5); animation: hf-ring 3.6s ease-out infinite; }
.hf-core .r2 { animation-delay: 1.2s; } .hf-core .r3 { animation-delay: 2.4s; }
.hf-core .orb { position: relative; width: 108px; height: 108px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 30% 25%, #fff, #e4ecff 70%); border: 1px solid rgba(31,91,255,.25); box-shadow: 0 0 0 10px rgba(31,91,255,.08), 0 20px 60px rgba(31,91,255,.4); animation: hf-float 5s ease-in-out infinite; }
.hf-core .orb img { width: 46px; height: 46px; }
.hf-core small { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: #fff; background: #1F5BFF; padding: 4px 12px; border-radius: 999px; }

.hf-label { display: flex; justify-content: space-between; max-width: 1240px; margin: 1.25rem auto 0; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dark-subtle); }
.hf-label span { width: 28.5%; text-align: center; }

@media (max-width: 900px) {
  .hf-stage { height: auto; display: grid; gap: 18px; }
  .hf-beams { display: none; }
  .hf-col { position: static; width: auto; gap: 12px; }
  .hf-core { position: relative; left: auto; top: auto; transform: none; margin: 8px auto; }
  .hf-card { height: 78px; }
  .hf-label { display: none; }
}

/* order -> shipment journey (interactive) */
@keyframes hj-swap { from { opacity: 0; transform: translateY(8px); } }
@keyframes hj-pop { 0%,100% { box-shadow: 0 0 0 0 rgba(31,91,255,.35); } 50% { box-shadow: 0 0 0 12px rgba(31,91,255,0); } }
.hj { max-width: 1000px; margin: 3.5rem auto 0; }
.hj-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; font-size: 1.05rem; font-weight: 600; color: var(--text-dark); letter-spacing: -.2px; }
.hj-head::before, .hj-head::after { content: ''; flex: 1; height: 1px; background: var(--border-stone-strong); }
.hj-rail { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); }
.hj-line { position: absolute; left: calc(100% / 12); right: calc(100% / 12); top: 28px; height: 4px; border-radius: 4px; background: rgba(31,91,255,.14); }
.hj-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 4px; background: linear-gradient(90deg,#1F5BFF,#38BDF8); box-shadow: 0 0 12px rgba(31,91,255,.55); transition: width .6s cubic-bezier(.4,0,.2,1); }
.hj-node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.hj-node i { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--text-dark-subtle); border: 1px solid var(--border-stone-strong); box-shadow: var(--shadow-card); transition: transform .35s cubic-bezier(.3,1.5,.5,1), background .3s, color .3s, border-color .3s; }
.hj-node i svg { width: 24px; height: 24px; }
.hj-node span { font-size: 13.5px; font-weight: 600; color: var(--text-dark-subtle); transition: color .3s; }
.hj-node:hover i { transform: translateY(-3px); }
.hj-node.done i { background: #e8efff; color: #1F5BFF; border-color: rgba(31,91,255,.3); }
.hj-node.done span { color: var(--text-dark-muted); }
.hj-node.on i { transform: scale(1.18); background: linear-gradient(135deg,#7aa8ff,#1F5BFF); color: #fff; border-color: #1F5BFF; animation: hj-pop 1.8s ease-out infinite; }
.hj-node.on span { color: var(--text-dark); }
.hj-node:last-child.on i { background: linear-gradient(135deg,#6ee7a0,#22a85a); border-color: #22a85a; }
.hj-node:focus-visible i { outline: 2px solid #1F5BFF; outline-offset: 3px; }
.hj-panel { margin: 2rem auto 0; max-width: 520px; padding: 1.25rem 1.5rem; text-align: center; background: #fff; border: 1px solid var(--border-stone); border-radius: 20px; box-shadow: var(--shadow-card); }
.hj-panel.swap > * { animation: hj-swap .4s ease both; }
.hj-count { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dark-subtle); }
.hj-msg { margin: .35rem 0 .75rem; font-size: 1.25rem; font-weight: 600; letter-spacing: -.25px; color: var(--text-dark); }
.hj-chip { display: inline-block; font-style: normal; font-size: 12.5px; font-weight: 700; padding: 5px 14px; border-radius: 999px; background: rgba(31,91,255,.1); color: #1F5BFF; }
.hj-panel.last .hj-chip { background: rgba(34,197,94,.14); color: #15803d; }
@media (max-width: 640px) { .hj-node i { width: 46px; height: 46px; } .hj-node i svg { width: 20px; height: 20px; } .hj-line { top: 21px; } .hj-node span { font-size: 11px; } .hj-node.on i { transform: scale(1.1); } .hj-msg { font-size: 1.05rem; } }
@media (max-width: 640px) {
  .hf-stage { gap: 10px; margin-top: 2rem; }
  .hf-col { gap: 10px; }
  .hf-card { height: 66px; padding: 0 14px; border-radius: 16px; }
  .hf-card i { width: 38px; height: 38px; }
  .hf-card b { font-size: 14px; }
  .hf-core { width: 150px; height: 150px; margin: 0 auto; }
  .hf-core .orb { width: 86px; height: 86px; }
  .hf-core .orb img { width: 38px; height: 38px; }
}