*{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:#FBFCFE;font-family:'Hanken Grotesk',sans-serif;color:#0A172C;-webkit-font-smoothing:antialiased}
  ::selection{background:#465EFC;color:#fff}
  a{text-decoration:none;color:inherit}
  @keyframes spin{to{transform:rotate(360deg)}}
  @keyframes draw{to{stroke-dashoffset:0}}
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
  .ispin{transform-box:fill-box;transform-origin:center;animation:spin 42s linear infinite}
  .idraw{stroke-dasharray:362;stroke-dashoffset:362;animation:draw 2.4s .25s cubic-bezier(.4,0,.2,1) forwards}
  .ifloat{animation:floaty 6.5s ease-in-out infinite}
  @keyframes flow{0%{offset-distance:0%;opacity:0}12%{opacity:1}84%{opacity:1}100%{offset-distance:100%;opacity:0}}
  @keyframes hubpulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.85);opacity:0}}
  .coin{position:absolute;top:0;left:0;width:24px;height:24px;border-radius:50%;background:#465EFC;color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Sora',sans-serif;font-weight:700;font-size:12px;line-height:1;box-shadow:0 6px 16px -4px rgba(70,94,252,0.9);offset-anchor:center;offset-rotate:0deg}
  .reveal{opacity:0;transform:translateY(20px)}
  .reveal.in{opacity:1;transform:none;transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1)}


/* Static-site normalization and mobile-first fixes around the design export. */
img, svg { max-width: 100%; }
button, input, textarea { font: inherit; }
nav > div { min-width: 0; }
#inspiralSite section:first-of-type a[data-i18n="heroCta1"],
#inspiralSite section:first-of-type a[data-i18n="heroCta2"] {
  white-space: nowrap;
}
@media (max-width: 900px) {
  nav { align-items: flex-start !important; padding: 14px 18px !important; }
  nav > div { gap: 10px !important; justify-content: flex-end !important; flex-wrap: wrap !important; }
  nav a[data-i18n^="nav"]:not([data-i18n="navCta"]) { display: none !important; }
  nav a[data-i18n="navCta"] { padding: 8px 13px !important; font-size: 13px !important; }
  section { padding-left: 20px !important; padding-right: 20px !important; }
  #inspiralSite section:first-of-type { padding-left: 14px !important; padding-right: 14px !important; }
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [style*="width:420px;height:360px"] { width: 420px !important; height: 360px !important; max-width: none !important; margin: 10px auto 0 !important; }
  #heroArt { margin-top: 18px !important; overflow: visible; }
  #creatorCard { right: 8px !important; }
  [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
  footer [style*="grid-template-columns:1.4fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
  nav { gap: 12px !important; }
  nav img { height: 30px !important; }
  [style*="font-size:clamp(44px,6.4vw,86px)"] { font-size: clamp(42px, 13vw, 62px) !important; }
  #inspiralSite section:first-of-type a[data-i18n="heroCta1"],
  #inspiralSite section:first-of-type a[data-i18n="heroCta2"] {
    font-size: 14px !important;
    padding: 12px 22px !important;
  }
  [style*="width:420px;height:360px"] { transform: translateX(-24px) scale(.9); transform-origin: center top; height: 324px !important; }
  .hero-flow-hub { top: 116px !important; }
  .coin { width: 22px !important; height: 22px !important; margin-top: -24px; }
  footer [style*="justify-content:space-between"] { flex-direction: column !important; align-items: flex-start !important; }
}
@media (max-width: 430px) {
  [style*="width:420px;height:360px"] { transform: translateX(-20px) scale(.86); height: 310px !important; }
}
@media (max-width: 380px) {
  #inspiralSite section:first-of-type { padding-left: 10px !important; padding-right: 10px !important; }
  #inspiralSite section:first-of-type a[data-i18n="heroCta1"],
  #inspiralSite section:first-of-type a[data-i18n="heroCta2"] {
    font-size: 13.5px !important;
    padding: 11px 18px !important;
  }
  [style*="width:420px;height:360px"] { transform: translateX(-16px) scale(.8); height: 288px !important; }
  .coin { width: 20px !important; height: 20px !important; font-size: 11px !important; margin-top: -23px; }
}