.earn-hero{padding:96px 0 80px;background:radial-gradient(1100px 420px at 20% 0, rgba(99,102,241,.10), transparent 60%), radial-gradient(1100px 420px at 80% 10%, rgba(59,130,246,.10), transparent 60%), linear-gradient(180deg,#eef2ff 0%, #ffffff 70%)}
.earn-hero-inner{text-align:center}
.earn-hero-title{margin:0 0 10px 0;font-size:64px;line-height:1.05;font-weight:800}
.earn-hero-sub{color:#4b5563;margin:0}

.earn-wrap{padding:80px 0 48px;background:linear-gradient(180deg,#f6f7fb 0%, #ffffff 70%)}
.earn-card{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;background:#f8fafc;border:1px solid #e5e7eb;border-radius:24px;box-shadow:0 20px 48px rgba(15,23,42,.10);padding:32px;min-height:480px}
.earn-left{position:relative;display:flex;align-items:center;min-height:420px}
.earn-illus{width:100%;height:auto;display:block;border-radius:14px}
.apr-box{position:absolute;left:24px;bottom:24px;background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:14px 16px;box-shadow:0 12px 30px rgba(15,23,42,.10)}
.apr-value{font-weight:800;font-size:24px}
.apr-value span{font-size:12px;color:#6b7280}
.apr-note{font-size:12px;color:#6b7280;margin-top:6px;margin-bottom:10px}
.earn-right{display:flex;flex-direction:column;gap:18px}
.earn-item h4{margin:0 0 6px 0;font-weight:800}
.earn-item p{margin:0;color:#4b5563}

/* Details section */
.earn-details{padding:80px 0;background:linear-gradient(180deg,#ffffff 0%, #f6f7fb 100%)}
.details-title{text-align:center;margin:0 0 24px 0;font-size:40px;font-weight:800}
.detail-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.detail-card{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:18px;box-shadow:0 12px 30px rgba(15,23,42,.08);text-align:left}
.detail-card img{width:72px;height:72px}
.detail-card h4{margin:10px 0 6px 0}
.detail-card p{margin:0;color:#4b5563}

@media (max-width: 960px){
  .earn-card{grid-template-columns:1fr}
  .earn-hero-title{font-size:48px}
  .detail-grid{grid-template-columns:1fr 1fr}
}