/* Perfect Plants Club – Támogatóink fal (supporters.php) */
.sup-page{padding-bottom:70px}
.sup-hero{position:relative;margin:24px 0 22px;padding:clamp(30px,5vw,64px) clamp(20px,4vw,48px);border-radius:28px;text-align:center;overflow:hidden;isolation:isolate;
  background:radial-gradient(ellipse at 50% 0,rgba(232,189,104,.25),transparent 60%),radial-gradient(ellipse at 0 100%,rgba(143,206,122,.16),transparent 55%),linear-gradient(160deg,#1b2f22,#0d1811);border:1px solid rgba(246,220,160,.2);box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.sup-hero h1{margin:10px 0 12px!important;font:600 clamp(34px,5.4vw,62px)/1.05 'Playfair Display',serif!important;color:#fff!important}
.sup-hero h1 em{font-style:italic;background:var(--ppc-gold);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:ppcShine 6s ease-in-out infinite}
.sup-hero>p{max-width:640px;margin:0 auto 22px;color:rgba(243,239,228,.86);font-size:15.5px;line-height:1.65}
.sup-cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center}
.sup-count{font-size:14px;color:var(--muted)}
.sup-count b{font:600 26px 'Playfair Display',serif;color:var(--gold2);margin-right:2px}
.sup-you{margin:16px 0 0;font-weight:600;color:#b6e07a}
.sup-hearts{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.sup-hearts i{position:absolute;bottom:-40px;left:var(--x);font-size:var(--s);font-style:normal;opacity:0;filter:drop-shadow(0 6px 10px rgba(0,0,0,.4));animation:supRise var(--d) linear var(--delay) infinite}
@keyframes supRise{0%{opacity:0;transform:translateY(0) rotate(-10deg) scale(.7)}12%{opacity:.75}50%{transform:translate(18px,-48vh) rotate(8deg) scale(1)}85%{opacity:.5}100%{opacity:0;transform:translate(-12px,-95vh) rotate(-6deg) scale(1.1)}}

.sup-wall{list-style:none;margin:0;padding:0;columns:3 300px;column-gap:16px}
.sup-card{--h:142;break-inside:avoid;margin:0 0 16px;padding:16px 18px;border-radius:20px;border:1px solid hsla(var(--h),50%,70%,.2);
  background:radial-gradient(circle at 100% 0,hsla(var(--h),60%,55%,.16),transparent 55%),linear-gradient(165deg,var(--panel2),var(--panel));box-shadow:0 16px 32px -24px rgba(0,0,0,.8);
  animation:supIn .7s var(--ease) both;animation-delay:calc(var(--i) * 45ms);transition:transform .35s var(--ease),border-color .35s}
.sup-card:hover{transform:translateY(-3px);border-color:hsla(var(--h),60%,70%,.45)}
@keyframes supIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.sup-who{display:flex;align-items:center;gap:12px}
.sup-who>div{flex:1;min-width:0;display:grid}
.sup-who strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px}
.sup-who strong a{color:inherit}
.sup-who small{font-size:12px;color:var(--muted)}
.sup-av{flex:0 0 44px;height:44px;display:grid;place-items:center;border-radius:50%;font:600 19px 'Playfair Display',serif;color:#fff;background:linear-gradient(135deg,hsl(var(--h),45%,42%),hsl(calc(var(--h) + 40),50%,30%));box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.sup-heart{flex:0 0 auto;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:rgba(255,248,235,.04);font-size:17px;cursor:pointer;transition:transform .3s var(--ease),background .3s}
.sup-heart:hover{background:rgba(143,206,122,.14);transform:scale(1.08)}
.sup-heart.pop{animation:supPop .6s var(--ease)}
@keyframes supPop{30%{transform:scale(1.45) rotate(-10deg)}60%{transform:scale(.9)}}
.sup-card blockquote{position:relative;margin:12px 0 0;padding:12px 14px 12px 34px;border-radius:14px;background:rgba(255,248,235,.04);border:0;font:italic 500 15px/1.6 'Playfair Display',serif;color:var(--text);word-break:break-word}
.sup-card blockquote::before{content:'“';position:absolute;left:10px;top:2px;font:600 34px/1 'Playfair Display',serif;color:hsla(var(--h),60%,70%,.7)}
.sup-empty{display:grid;justify-items:center;text-align:center;gap:6px;padding:40px 20px;border-radius:24px;border:1px dashed rgba(246,220,160,.25)}
.sup-empty span{font-size:48px}
.sup-empty h2{margin:0!important}
.sup-note{max-width:720px;margin:10px auto 0;text-align:center;font-size:13px}
@media (max-width:640px){.sup-hero{margin-top:14px;border-radius:22px}.sup-wall{columns:1}}
@media (prefers-reduced-motion:reduce){.sup-hearts i,.sup-card,.sup-hero h1 em{animation:none;opacity:1}.sup-hearts{display:none}}