/* recycle.auction */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #F5E6CC; color: #1A1A2E; font-family: 'Inter', sans-serif; font-weight: 400; line-height: 1.65; }
.hero { position: relative; padding: 5rem 2rem 4rem; text-align: center; overflow: hidden; }
.vapor-bg { position: absolute; inset: 0; background: radial-gradient(circle at 20% 30%, rgba(82,183,136,0.3), transparent 50%), radial-gradient(circle at 80% 70%, rgba(212,168,67,0.3), transparent 50%); pointer-events: none; }
.hero-inner { position: relative; z-index: 1; max-width: 600px; margin: 0 auto; }
.headline { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(2.2rem, 6vw, 3.6rem); letter-spacing: -0.02em; margin-bottom: 1rem; }
.tagline { font-size: 1rem; color: #2D6A4F; margin-bottom: 2rem; }
.cta-btn { display: inline-block; background: #52B788; color: #ffffff; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 0.9rem; padding: 0.75rem 2rem; border-radius: 8px; text-decoration: none; box-shadow: 0 4px 0 #2D6A4F; }
.categories { padding: 0 2rem 2rem; }
.cat-strip { display: flex; justify-content: center; gap: 0.75rem; flex-wrap: wrap; }
.cat-chip { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 0.75rem; background: rgba(255,255,255,0.6); border: 1px dotted #2D6A4F; border-radius: 9999px; padding: 0.3rem 1rem; color: #2D6A4F; }
.auctions { max-width: 800px; margin: 0 auto; padding: 2rem; }
.auction-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.auction-card { background: #ffffff; border: 1px solid #2D6A4F; border-radius: 12px; overflow: hidden; }
.card-img { height: 120px; background: linear-gradient(135deg, #2D6A4F, #52B788); }
.card-body { padding: 1rem; }
.card-category { font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 0.6rem; color: #2D6A4F; letter-spacing: 0.1em; text-transform: uppercase; }
.card-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 0.95rem; margin: 0.3rem 0 0.5rem; }
.bid-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.bid-amount { font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 1.1rem; color: #D4A843; }
.bid-count { font-size: 0.7rem; color: #2D6A4F; }
.time-bar { height: 4px; background: #e0e0e0; border-radius: 2px; overflow: hidden; margin-bottom: 0.75rem; }
.time-fill { height: 100%; background: #52B788; border-radius: 2px; }
.time-fill.urgent { background: #E76F51; }
.bid-button { width: 100%; background: #52B788; color: #ffffff; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 0.8rem; padding: 0.5rem; border: none; border-radius: 6px; box-shadow: 0 3px 0 #2D6A4F, inset 0 -3px 0 rgba(0,0,0,0.2); cursor: pointer; }
.impact-ticker { background: #1B4332; padding: 0.75rem 2rem; text-align: center; overflow: hidden; }
.ticker-text { font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 0.75rem; color: #52B788; white-space: nowrap; }
.trust { background: #1B4332; padding: 4rem 2rem; }
.trust-inner { max-width: 600px; margin: 0 auto; }
.stats-row { display: flex; justify-content: space-around; text-align: center; }
.stat-num { font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: clamp(2rem, 4vw, 3rem); color: #52B788; display: block; }
.stat-label { font-size: 0.8rem; color: #F5E6CC; }
.join { padding: 4rem 2rem; text-align: center; }
.join-inner { max-width: 500px; margin: 0 auto; }
.join-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.8rem; margin-bottom: 0.75rem; }
.join-text { font-size: 0.9rem; color: #2D6A4F; margin-bottom: 1.5rem; }
.footer { background: #1A1A2E; padding: 2rem; text-align: center; }
.footer-text { font-size: 0.8rem; color: #52B788; }
@media (max-width: 640px) {
    .auction-grid { grid-template-columns: 1fr; max-width: 320px; margin: 0 auto; }
}
.fade-in { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }