/* ============================================================
   Home — editorial layer, modelled on compound.xyz
   Type ramp, material and spacing lifted from the original:
   overline labels in brand green, Rethink Sans display, 42dot
   Sans Light numerals, glass panels with a hard teal offset
   shadow, and a lot of air between blocks.
   ============================================================ */

.app .view.hx{
  padding-left:0; padding-right:0;
}

.hx{
  --hx-ink:#01090a;
  --hx-card:#040f13;
  --hx-glass:rgba(1,6,8,.71);
  --hx-mint:#d9f0d7;
  --hx-mist:#c7ebdc;
  --hx-muted:#8a9c92;
  --hx-brand:#00d395;
  --hx-neon:#00ffb3;
  --hx-on:#09090b;
  --hx-line:rgba(217,240,215,.09);
  --hx-line-2:rgba(217,240,215,.14);
  --hx-gutter:20px;
  --hx-hard:4px 4px 0 -1px rgba(3,61,60,.62);
  --hx-soft:0 30px 42px -14px rgba(0,0,0,.62);
  position:relative;
}

/* ---------- shared type ---------- */

.hx-eyebrow{
  margin:0;
  font-family:var(--font);
  font-size:11.5px; font-weight:800; line-height:1.6;
  letter-spacing:.3px; text-transform:uppercase;
  color:var(--hx-brand);
}
.hx-title{
  margin:10px 0 0;
  font-family:var(--font);
  font-size:clamp(27px, 8.4vw, 34px);
  font-weight:600; line-height:1.06;
  letter-spacing:-.03em;
  color:var(--hx-mint);
  text-wrap:balance;
}
.hx-lede{
  margin:12px 0 0;
  max-width:34ch;
  font-family:var(--font);
  font-size:14.5px; font-weight:400; line-height:1.58;
  color:var(--hx-muted);
}
.hx-h2{
  margin:8px 0 0;
  font-family:var(--font);
  font-size:clamp(21px, 6.6vw, 26px);
  font-weight:600; line-height:1.14;
  letter-spacing:-.03em;
  color:var(--hx-mint);
}
.hx-num{
  font-family:var(--font-num);
  font-weight:300; letter-spacing:-.02em;
  color:var(--hx-mint);
  font-variant-numeric:tabular-nums;
}

/* ---------- hero ---------- */

.hx-hero{
  position:relative;
  padding:6px var(--hx-gutter) 0;
  isolation:isolate;
}
.hx-hero__inner{ position:relative; z-index:2; }

.hx-art{
  position:relative;
  overflow:clip;
  height:196px;
  margin:2px 0 20px;
  z-index:1;
  pointer-events:none;
}
.hx-art__glow{
  position:absolute; left:50%; top:52%;
  width:340px; height:260px;
  transform:translate(-50%,-50%);
  background:
    radial-gradient(50% 50% at 50% 50%, rgba(0,211,149,.30), rgba(0,211,149,0) 70%),
    radial-gradient(40% 40% at 30% 60%, rgba(74,168,255,.20), rgba(74,168,255,0) 72%);
  filter:blur(14px);
  opacity:.9;
  will-change:transform;
}
.hx-tile{
  position:absolute;
  width:min(136px, 33%); height:88px;
  border-radius:20px;
  background:linear-gradient(158deg, rgba(217,240,215,.16), rgba(1,9,10,.30) 62%);
  border:1px solid rgba(217,240,215,.13);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 18px 26px -16px rgba(0,0,0,.9);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  overflow:hidden;
  will-change:transform;
  animation:hx-float 9s var(--ease) infinite;
}
.hx-tile__orb{
  position:absolute; inset:8%;
  border-radius:50%;
  filter:blur(10px);
  opacity:.85;
}
.hx-tile--a{ left:8%;  top:44px; transform:rotate(-11deg);  animation-delay:-.4s; }
.hx-tile--b{ left:36%; top:14px; transform:rotate(3deg);    animation-delay:-3.1s; z-index:2; }
.hx-tile--c{ left:62%; top:56px; transform:rotate(14deg);   animation-delay:-5.6s; }
.hx-tile--a .hx-tile__orb{ background:radial-gradient(circle at 35% 35%, #00ffb3, #00d395 38%, rgba(0,211,149,0) 72%); }
.hx-tile--b .hx-tile__orb{ background:radial-gradient(circle at 60% 40%, #d9f0d7, #7fe3c2 36%, rgba(127,227,194,0) 74%); }
.hx-tile--c .hx-tile__orb{ background:radial-gradient(circle at 55% 55%, #4aa8ff, #1c6fbf 40%, rgba(28,111,191,0) 76%); }

/* 卡片里装的币种图标 */
.hx-tile .tok-logo{
  position:absolute; left:50%; top:50%;
  width:44px; height:44px;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.65));
  opacity:.97;
}

.hx-art__ring{
  position:absolute; left:50%; top:50%;
  width:250px; height:250px;
  margin:-125px 0 0 -125px;
  border-radius:50%;
  border:1px solid rgba(0,211,149,.16);
  mask-image:radial-gradient(circle, transparent 58%, #000 59%);
  -webkit-mask-image:radial-gradient(circle, transparent 58%, #000 59%);
  animation:hx-spin 44s linear infinite;
}
.hx-art__ring::after{
  content:"";
  position:absolute; top:-3px; left:50%;
  width:5px; height:5px; margin-left:-2.5px;
  border-radius:50%;
  background:var(--hx-neon);
  box-shadow:0 0 12px 3px rgba(0,255,179,.6);
}

@keyframes hx-float{
  0%,100%{ translate:0 0; }
  50%    { translate:0 -9px; }
}
@keyframes hx-spin{ to{ rotate:360deg; } }

/* ---------- buttons ---------- */

.hx-cta{
  display:flex; align-items:center; gap:10px;
  margin-top:22px;
}
.hx-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:46px; padding:0 20px;
  border-radius:999px;
  font-family:var(--font);
  font-size:14px; font-weight:600; letter-spacing:-.01em;
  border:1px solid transparent;
  transition:transform .18s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.hx-btn:active{ transform:scale(.975); }
.hx-btn--brand{
  background:var(--hx-brand);
  color:var(--hx-on);
  box-shadow:0 10px 26px -10px rgba(0,211,149,.7);
}
.hx-btn--ghost{
  background:rgba(217,240,215,.04);
  border-color:var(--hx-line-2);
  color:var(--hx-mist);
}
.hx-btn--ghost:active{ background:rgba(217,240,215,.08); }
.hx-btn .ico{ width:17px; height:17px; }

/* ---------- stat strip ---------- */

.hx-stats{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:0;
  margin:30px var(--hx-gutter) 0;
  padding:18px 0;
  border-top:1px solid var(--hx-line);
  border-bottom:1px solid var(--hx-line);
}
.hx-stat{
  display:flex; flex-direction:column; gap:5px;
  padding:0 12px;
  border-left:1px solid var(--hx-line);
}
.hx-stat:first-child{ padding-left:0; border-left:0; }
.hx-stat b{ font-size:clamp(19px, 5.6vw, 23px); line-height:1; }
.hx-stat span{
  font-family:var(--font);
  font-size:11px; font-weight:400; line-height:1.3;
  color:var(--hx-muted);
}

/* ---------- blocks ---------- */

.hx-block{
  padding:44px var(--hx-gutter) 0;
}
.hx-block__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }

.hx-rail{
  display:flex; gap:12px;
  margin:18px calc(var(--hx-gutter) * -1) 0;
  padding:2px var(--hx-gutter) 6px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.hx-rail::-webkit-scrollbar{ display:none; }
.hx-rail > *{ scroll-snap-align:start; flex:0 0 74%; max-width:300px; }

.hx-card{
  position:relative;
  display:block;
  width:100%;
  text-align:left;
  padding:16px;
  border-radius:22px;
  background:var(--hx-card);
  border:1px solid var(--hx-line);
  box-shadow:0 11px 24px -14px rgba(0,0,0,.85);
  overflow:hidden;
  transition:transform .2s var(--ease), border-color .2s var(--ease);
}
.hx-card:active{ transform:scale(.985); border-color:var(--hx-line-2); }
.hx-card__orb{
  position:absolute; right:-46px; top:-56px;
  width:150px; height:150px; border-radius:50%;
  filter:blur(6px); opacity:.5; pointer-events:none;
  transition:transform .4s var(--ease);
}
.hx-card:active .hx-card__orb{ transform:scale(1.08); }
.hx-card__top{ display:flex; align-items:center; gap:10px; position:relative; }
/* middle column must be allowed to shrink, or a narrow card pushes the APR out */
.hx-card__top > span{ min-width:0; }
.hx-card__sym{
  font-family:var(--font);
  font-size:14px; font-weight:600; letter-spacing:-.01em;
  color:var(--hx-mint);
  display:flex; align-items:center; gap:7px;
}
.hx-card__meta{
  margin-top:3px;
  font-family:var(--font);
  font-size:11.5px; font-weight:400;
  color:var(--hx-muted);
}
.hx-card__apr{
  margin-left:auto; text-align:right;
}
.hx-card__apr b{
  display:block;
  font-family:var(--font-num); font-weight:300;
  font-size:22px; line-height:1; letter-spacing:-.02em;
  color:var(--hx-brand);
}
.hx-card__apr span{
  display:block; margin-top:3px;
  font-family:var(--font); font-size:10px; font-weight:600;
  letter-spacing:.18px; text-transform:uppercase;
  color:var(--hx-muted);
}
.hx-card__foot{
  position:relative;
  display:flex; align-items:center; gap:8px;
  margin-top:14px; padding-top:12px;
  border-top:1px solid var(--hx-line);
  font-family:var(--font);
  font-size:11.5px; color:var(--hx-muted);
}
.hx-card__foot b{ color:var(--hx-mist); font-weight:600; }

.hx-pill{
  display:inline-block;
  padding:3px 8px;
  border-radius:999px;
  font-family:var(--font);
  font-size:10px; font-weight:600; letter-spacing:.02em;
  color:var(--hx-brand);
  background:rgba(0,211,149,.12);
  border:1px solid rgba(0,211,149,.24);
}
.hx-pill--muted{ color:var(--hx-muted); background:rgba(217,240,215,.05); border-color:var(--hx-line-2); }

.hx-more{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:16px;
  font-family:var(--font);
  font-size:13px; font-weight:600;
  color:var(--hx-brand);
}
.hx-more .ico{ width:14px; height:14px; }

/* ---------- portfolio (signed in) ---------- */

.hx-glass{
  position:relative;
  margin:26px var(--hx-gutter) 0;
  padding:18px;
  border-radius:28px;
  background:var(--hx-glass);
  border:1px solid rgba(217,240,215,.10);
  box-shadow:var(--hx-hard), 0 34px 60px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
  overflow:hidden;
}
.hx-glass__glow{
  position:absolute; right:-70px; top:-90px;
  width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, rgba(0,211,149,.34), rgba(0,211,149,0) 70%);
  filter:blur(8px); pointer-events:none;
}
.hx-glass__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.hx-glass__val{
  display:block;
  margin-top:12px;
  font-size:clamp(30px, 9vw, 38px); line-height:1;
}
.hx-glass__grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  margin-top:16px; padding-top:14px;
  border-top:1px solid rgba(217,240,215,.10);
}
.hx-glass__cell{ padding:0 10px; border-left:1px solid rgba(217,240,215,.08); }
.hx-glass__cell:first-child{ padding-left:0; border-left:0; }
.hx-glass__k{
  font-family:var(--font); font-size:10.5px; font-weight:600;
  letter-spacing:.16px; text-transform:uppercase;
  color:var(--hx-muted);
}
.hx-glass__v{
  margin-top:5px;
  font-family:var(--font-num); font-weight:300;
  font-size:17px; line-height:1;
  color:var(--hx-mint);
  font-variant-numeric:tabular-nums;
}
.hx-glass__v.is-up{ color:var(--hx-brand); }
.hx-glass__v.is-down{ color:#ff6060; }

/* ---------- ticker ---------- */

.hx-ticker{
  margin:44px 0 0;
  padding:12px 0;
  border-top:1px solid var(--hx-line);
  border-bottom:1px solid var(--hx-line);
  overflow:hidden;
  mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.hx-ticker__track{
  display:flex; gap:26px; width:max-content;
  animation:hx-marquee 34s linear infinite;
}
.hx-ticker:hover .hx-ticker__track{ animation-play-state:paused; }
.hx-ticker__item{
  display:inline-flex; align-items:baseline; gap:7px;
  font-family:var(--font);
  font-size:11.5px; color:var(--hx-muted);
  white-space:nowrap;
}
.hx-ticker__item b{
  font-family:var(--font-num); font-weight:400; font-size:12.5px;
  color:var(--hx-mist);
}
.hx-ticker__item i{ font-style:normal; color:var(--hx-brand); }
@keyframes hx-marquee{ to{ transform:translateX(-50%); } }

/* ---------- protocol footer card ---------- */

.hx-foot{
  margin:44px var(--hx-gutter) 0;
  padding:18px;
  border-radius:22px;
  background:var(--hx-card);
  border:1px solid var(--hx-line);
}
.hx-foot__row{
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 0;
  border-top:1px solid var(--hx-line);
  font-family:var(--font); font-size:12.5px;
  color:var(--hx-muted);
}
.hx-foot__row:first-child{ border-top:0; }
.hx-foot__row b{
  font-family:var(--font-num); font-weight:300; font-size:14px;
  color:var(--hx-mint);
}

/* ---------- reveal + motion ---------- */

.hx [data-reveal]{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .62s var(--ease), transform .62s var(--ease);
  transition-delay:calc(var(--i, 0) * 70ms);
}
.hx [data-reveal].is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .hx [data-reveal]{ opacity:1; transform:none; transition:none; }
  .hx-tile, .hx-art__ring, .hx-ticker__track{ animation:none !important; }
}

/* ---------- wide screens: two-column blocks ---------- */

@media (min-width:600px){
  .hx-rail{ margin-left:0; margin-right:0; padding-left:0; padding-right:0; }
  /* Keep the horizontal rail at every width. The app column is capped at
     560px, so splitting the cards into thirds here crushed the card header
     (asset name wrapped, APR was clipped). */
  .hx-rail > *{ flex:0 0 74%; max-width:300px; }
}