.plugins-page{background:#fff}

.plugins-bg{
  position:fixed;
  inset:0;
  background-image:url("../assets/banner-mint.png");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  z-index:0;
}
.plugins-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,0.78), rgba(255,255,255,0.20) 56%, rgba(246,246,246,0.44)),
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.30));
  pointer-events:none;
}
.plugins-bg::after{
  content:"";
  position:absolute;
  inset:-80px;
  background:radial-gradient(760px 340px at 72% 22%, rgba(38,181,100,0.12), transparent 62%);
  pointer-events:none;
}

.leaves{
  position:fixed;
  inset:-90px -60px -140px -60px;
  pointer-events:none;
  z-index:1;
  --speedMul: 0.35;
}

.leaf{
  position:absolute;
  left:var(--x,50%);
  top:var(--y,-12vh);
  width:var(--size,52px);
  height:var(--size,52px);
  opacity:var(--o,0.36);
}
.leaf i{
  display:block;
  width:100%;
  height:100%;
  background-image:url("../assets/logo.png");
  background-size:contain;
  background-repeat:no-repeat;
  filter:saturate(1.25) contrast(1.08);
  mix-blend-mode:multiply;
  animation-name:leafFall;
  animation-duration:calc(var(--dur,18s) / var(--speedMul));
  animation-delay:var(--delay,0.0s);
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  will-change:transform;
}
@keyframes leafFall{
  0%{transform:translate3d(0,0,0) rotate(0deg)}
  100%{transform:translate3d(var(--drift,-120px),98vh,0) rotate(var(--rot,520deg))}
}

.plugins-main{position:relative;z-index:2}

.plugins-hero{
  position:relative;
  min-height:calc(88vh - 72px);
  display:grid;
  place-items:center;
  padding:92px 0 70px 0;
  overflow:hidden;
}
.plugins-hero .hero-center{
  position:relative;
  text-align:center;
  max-width:980px;
  padding:0 20px;
  transform-origin:center top;
  will-change:transform,opacity;
}

.plugins-page .hero-title{
  font-size:clamp(46px,6.2vw,86px);
  letter-spacing:-1.35px;
  line-height:1.02;
  margin-top:14px;
  text-wrap:balance;
}
.plugins-page .hero-sub{
  margin-top:14px;
  font-size:18px;
  color:var(--muted);
  font-weight:650;
  max-width:70ch;
  margin-left:auto;
  margin-right:auto;
  text-wrap:pretty;
}
.plugins-page .hero-actions-center{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:24px;
}

.feed{padding:0 0 64px 0}
.feed-inner{
  width:min(980px, calc(100% - 40px));
  margin:0 auto;
  display:grid;
  gap:6vh;
  padding:10px 0 10px 0;
}

.feed-card{
  border:1px solid rgba(15,47,44,0.14);
  border-radius:28px;
  background:rgba(255,255,255,0.74);
  backdrop-filter:blur(10px);
  box-shadow:var(--shadow-soft);
  padding:18px;
  min-height:64vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.plugin-top{display:flex;align-items:center;gap:14px}
.plugin-icon{
  width:58px;height:58px;border-radius:18px;
  border:1px solid rgba(15,47,44,0.14);
  background:rgba(255,255,255,0.92);
  object-fit:cover;
  flex:0 0 auto;
}
.plugin-meta{min-width:0}
.plugin-name{font-size:24px;letter-spacing:-0.6px;margin:0;line-height:1.05}

.plugin-desc{
  margin-top:7px;
  color:var(--muted);
  font-weight:560;
  max-width:78ch;
}

.plugin-points{
  margin:14px 0 0 0;
  padding-left:18px;
  color:var(--muted);
  font-weight:650;
}
.plugin-points li{margin:6px 0}

.plugin-preview{
  margin-top:14px;
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(15,47,44,0.14);
  background:rgba(255,255,255,0.90);
}
.plugin-preview video{width:100%;height:auto;display:block;background:#fff}
.plugin-preview-cap{
  padding:12px 14px;
  border-top:1px solid rgba(15,47,44,0.10);
  color:var(--muted);
  font-weight:650;
  font-size:13px;
}

.plugin-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

.more-soon{
  width:min(980px, calc(100% - 40px));
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:22px 10px;
}
.more-line{
  height:1px;
  flex:1;
  background:rgba(15,47,44,0.18);
  max-width:260px;
}
.more-text{
  color:rgba(15,47,44,0.70);
  font-weight:850;
  letter-spacing:-0.2px;
  white-space:nowrap;
}

.footer-glass{
  background:rgba(255,255,255,0.82);
  backdrop-filter:blur(10px);
}

@media (max-width:920px){
  .feed-card{min-height:62vh}
  .more-line{max-width:200px}
}

@media (max-width:760px){
  .feed-card{min-height:60vh}
  .plugin-top{align-items:flex-start}
  .more-line{max-width:140px}
}

@media (prefers-reduced-motion: reduce){
  .leaf{display:none}
  #heroScale{transform:none !important;opacity:1 !important}
}