/* Landing hero v3 (2.0.0): headline, one rotating line, then a fan of six live data cards and "Built on Chiliz".
   The fan follows the ReactDrops Fan Gallery settings the owner picked (our own code, no copied source):
   stack-spread entrance, 1.15 s spring, .06 s stagger, bounce .2, .34 s focus, curve depth .08, edge tilt 10.5 deg,
   hover lift 34 px, hover gap .2, 204 px cards at aspect .48, radius 41 px, left cards in front. Motion lives in hero.js. */
.hx{padding:30px 0 30px;--hx-sans:"Poppins",var(--sans);--hx-mono:"Space Mono",var(--mono)}
/* type, from the Feature Post handoff: Poppins for words, Space Mono for labels and numbers */
.hx .center{text-align:center}

/* live pill */
.hx-live{display:inline-block;font-family:var(--hx-mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;line-height:1.6;color:#ffa6b5;transition:color .2s}
.hx-live i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:pulse 1.8s infinite;margin:0 10px 1px 0;vertical-align:middle}
.hx-live .hx-net{color:var(--muted)}
.hx-live:hover{color:#fff}

/* headline: steel words that rise out of their own line on load */
.hx .hx-h1{font-family:var(--hx-sans);font-size:clamp(36px,4.9vw,74px);line-height:1.04;letter-spacing:-.03em;font-weight:700;max-width:none;margin:22px auto 0}
/* each word clips its own rise; the inner box is padded so descenders (g, y) and the last letter's edge stay inside the painted gradient */
.hx .wd{display:inline-block;overflow:hidden;vertical-align:top;margin:-.06em -.1em -.26em}
.hx .wd>span{display:inline-block;padding:.06em .1em .26em;background:linear-gradient(180deg,#fff 34%,#b9b8c6 78%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hx.anim .wd>span{animation:hxRise .95s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 70ms)}
.hx .nb{white-space:nowrap}
@keyframes hxRise{from{transform:translateY(105%)}to{transform:none}}

/* the one line: "Your agent [verb] . You keep the keys." The verb sits on a drum that turns */
.hx .hx-line{margin:18px auto 0;font-family:var(--hx-sans);font-size:clamp(18px,1.95vw,27px);line-height:1.35;color:var(--fg2);font-weight:400;letter-spacing:-.01em}
.hx .rot{position:relative;display:inline-block;vertical-align:bottom;height:1.3em;clip-path:inset(-.7em -3px -.7em 0);transition:width .55s cubic-bezier(.3,.7,.2,1)}
.hx .rot .w{position:absolute;left:0;top:0;white-space:pre;font-weight:600;color:var(--accent2);text-shadow:0 0 26px rgba(255,51,86,.38);perspective:520px}
.hx .rot:not(.js) .w{position:static}
.hx .rot.js .w i{display:inline-block;font-style:normal;opacity:0;transform:rotateX(-100deg);transform-origin:50% 50% -.55em;transition:transform .62s cubic-bezier(.3,.7,.2,1),opacity .45s ease;transition-delay:var(--d,0ms)}
.hx .rot.js .w.in i{opacity:1;transform:none}
.hx .rot.js .w.out i{opacity:0;transform:rotateX(100deg);transition-duration:.45s,.3s;transition-delay:var(--o,0ms)}
.hx .rot.js .w.nt i{transition:none}
.hx .rot::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:1px;background:linear-gradient(90deg,transparent,rgba(255,122,144,.75),transparent)}
.hx .hx-line .k{color:var(--muted)}

/* the fan */
.hx-fan{--cw:204px;--ch:425px;position:relative;height:540px;margin:24px auto 0;max-width:1400px}
.fc{position:absolute;left:50%;top:0;width:var(--cw);height:var(--ch);margin-left:calc(var(--cw) / -2);border-radius:calc(var(--cw) * .2);
  padding:calc(var(--cw) * .115) calc(var(--cw) * .105) calc(var(--cw) * .12);display:flex;flex-direction:column;overflow:hidden;color:inherit;
  transform-origin:50% 100%;will-change:transform;
  background:radial-gradient(130% 58% at var(--gx,50%) 114%,rgba(255,51,86,.44),transparent 62%),radial-gradient(90% 42% at var(--tx,80%) -8%,rgba(255,51,86,.15),transparent 70%),linear-gradient(180deg,#17171e,#0b0b10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 40px 70px -28px rgba(0,0,0,.92);transition:box-shadow .35s ease}
.fc:hover,.fc:focus-visible{color:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 50px 80px -28px rgba(0,0,0,.95),0 0 70px -12px rgba(255,51,86,.55)}
.fc:focus-visible{outline:2px solid var(--accent2);outline-offset:4px}
.fc .t{display:flex;justify-content:space-between;align-items:center;gap:8px;font-family:var(--hx-sans);font-weight:600;font-size:clamp(10.5px,calc(var(--cw) * .068),14px);letter-spacing:-.005em;color:var(--fg);line-height:1.25}
.fc .t em{font-style:normal;font-family:var(--hx-mono);font-size:.95em;color:var(--dim);transition:transform .25s,color .25s}
.fc:hover .t em,.fc:focus-visible .t em{color:var(--accent2);transform:translateX(3px)}
.fc .art{flex:1 1 auto;min-height:0;display:grid;place-items:center;margin:9% -3% 7%}
.fc .art svg{display:block;width:100%;max-height:100%;overflow:visible}
.fc .v{display:block;font-family:var(--hx-mono);font-weight:700;font-size:clamp(20px,calc(var(--cw) * .2),44px);line-height:1;letter-spacing:-.04em;color:#fff;white-space:nowrap}
.fc .v small{font-family:var(--hx-sans);font-weight:500;font-size:clamp(10px,calc(var(--cw) * .066),13.5px);letter-spacing:0;color:var(--fg2);margin-left:.45em}
.fc .c{margin-top:.75em;font-family:var(--hx-sans);font-size:clamp(10px,calc(var(--cw) * .059),12px);line-height:1.45;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:4.35em}
.hx-fan.compact .fc .c{display:none}
/* the faded red artwork */
.fc .art.words{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;margin:8% 0 6%}
.fc .art.words i{font-style:normal;font-family:var(--hx-sans);font-weight:700;font-size:calc(var(--cw) * .118);line-height:1.08;letter-spacing:-.03em;color:var(--accent)}
.fc .art.words i:nth-child(1){opacity:.95}.fc .art.words i:nth-child(2){opacity:.62}.fc .art.words i:nth-child(3){opacity:.42}.fc .art.words i:nth-child(4){opacity:.26}.fc .art.words i:nth-child(5){opacity:.14}
.fc .sweep{transform-box:view-box;transform-origin:80px 80px;animation:fcSpin 5.5s linear infinite}
.fc .ping{transform-box:fill-box;transform-origin:center;animation:fcPing 2.4s ease-out infinite}
.fc rect.hot{animation:fcBlink 1.8s ease-in-out infinite}
@keyframes fcSpin{to{transform:rotate(360deg)}}
@keyframes fcPing{0%{transform:scale(1);opacity:.9}100%{transform:scale(4.6);opacity:0}}
@keyframes fcBlink{50%{opacity:.35}}
/* a fresh on-chain action: the record card glows once */
.fc.flash{animation:fcFlash 1.6s ease}
@keyframes fcFlash{25%{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 40px 70px -28px rgba(0,0,0,.92),0 0 90px -6px rgba(255,51,86,.85)}}

/* under the fan: Built on Chiliz, the CHZ price and the block */
.hx-foot{display:flex;justify-content:center;align-items:center;gap:10px 20px;flex-wrap:wrap;margin-top:8px}
.hx-foot .chz{display:inline-flex;align-items:center;font-size:15px;padding:8px 16px;white-space:nowrap}
.hx-foot .chz img{height:30px}
.hx-tick{font-family:var(--hx-mono);font-size:11.5px;letter-spacing:.04em;color:var(--muted);white-space:nowrap}
.hx-tick .dot{margin:0 9px;color:var(--dim)}

@media (max-width:560px){
  .hx{padding-top:26px}
  .hx .hx-h1{margin-top:18px}
  .hx .hx-line{margin-top:14px}
  .hx .hx-line .k{display:block}
  .hx-live{font-size:10.5px;letter-spacing:.16em}
  .hx-live .hx-net{display:block}.hx-live .sep{display:none}
  .hx-fan{margin-top:16px}
  .fc .t em{display:none}
  .hx-foot .chz{font-size:13px;padding:6px 13px}.hx-foot .chz img{height:24px}
  .hx-tick{font-size:10.5px}
}