/* Nexilo Earn Section/Page Styles */
:root {
  --earn-navy: #0a0f1f;
  --earn-red: #e50914;
  --earn-gold: #ffd700;
}

.earn-section {
  position: relative;
  background: radial-gradient(1200px 800px at 100% 0%, rgba(229,9,20,0.06), transparent 55%),
              var(--earn-navy);
  overflow: hidden;
}
.earn-wrap { max-width: 1200px; margin: 0 auto; padding: 64px 16px; }
.earn-title { font-family: 'Orbitron', 'Poppins', sans-serif; font-weight: 800; letter-spacing: .4px; }
.earn-sub { color: rgba(255,255,255,.8); }

/* Icon cards */
.earn-cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-top: 28px; }
.earn-card { border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 18px; background: rgba(255,255,255,.05); backdrop-filter: blur(10px); transition: transform .2s ease, box-shadow .2s ease; }
.earn-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,.35); }
.earn-card .icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(229,9,20,.12); border: 1px solid rgba(229,9,20,.35); margin-bottom: 8px; }

/* Counter */
.earn-counter { margin-top: 18px; font-weight: 800; font-size: clamp(18px, 2.2vw, 24px); }
.earn-counter .val { color: var(--earn-gold); text-shadow: 0 0 10px rgba(255,215,0,0.35); }

.earn-cta { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 12px; color: #0b0b10; background: radial-gradient(160% 140% at 50% 0%, #ff3741 0%, var(--earn-red) 48%, #b1060f 100%); font-weight: 700; box-shadow: 0 10px 24px rgba(229,9,20,.45); border: 1px solid rgba(255,255,255,.12); }
.earn-cta:hover { filter: brightness(1.06); transform: translateY(-2px); }

/* Background 3D coins (CSS) */
.earn-coins { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.earn-coin { position: absolute; width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #ffeab3, #ffb100); box-shadow: 0 6px 18px rgba(0,0,0,.35); animation: coinFloat 8s ease-in-out infinite; }
.earn-coin::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; border: 2px solid rgba(255,215,0,.7); filter: drop-shadow(0 0 6px rgba(255,215,0,.5)); }
@keyframes coinFloat { 0%,100%{ transform: translateY(-8px) rotate(0.01turn);} 50%{ transform: translateY(10px) rotate(-0.01turn);} }

/* Network lines */
.earn-network { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .35; }
.earn-network path { stroke: rgba(255,255,255,.35); stroke-width: 1; fill: none; stroke-dasharray: 6 8; animation: dash 12s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -300; } }

/* Earn page hero */
.earn-hero { position: relative; padding: 96px 16px 48px; background: var(--earn-navy); overflow: hidden; }
.earn-hero h1 { font-family: 'Orbitron','Poppins',sans-serif; font-size: clamp(28px,4vw,46px); font-weight: 800; }
.earn-hero p { color: rgba(255,255,255,.85); max-width: 780px; }
.earn-hero .hero-cta { margin-top: 18px; }

/* Feature cards */
.features { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.feature { border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 18px; background: rgba(255,255,255,.05); backdrop-filter: blur(10px); }
.feature .icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(229,9,20,.12); border: 1px solid rgba(229,9,20,.35); margin-bottom: 8px; }

/* Timeline */
.timeline { position: relative; padding-left: 18px; }
.timeline::before { content: ''; position: absolute; left: 8px; top: 4px; bottom: 4px; width: 2px; background: linear-gradient(180deg, rgba(229,9,20,.4), rgba(255,255,255,.2)); }
.step { position: relative; padding-left: 18px; margin-bottom: 14px; }
.step::before { content: ''; position: absolute; left: -2px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--earn-red); box-shadow: 0 0 10px rgba(229,9,20,.6); }

/* Calculator */
.calc { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.calc .panel { border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 18px; background: rgba(255,255,255,.05); backdrop-filter: blur(10px); }
.calc input[type=range] { width: 100%; accent-color: var(--earn-red); }
.calc .result .value { font-size: clamp(22px, 3vw, 32px); color: var(--earn-gold); text-shadow: 0 0 10px rgba(255,215,0,.35); }

/* Testimonials slider */
.slider { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; }
.slides { display: flex; transition: transform 400ms ease; }
.slide { min-width: 100%; padding: 18px; background: rgba(255,255,255,.05); backdrop-filter: blur(6px); }
.slider-nav { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.dot { width: 8px; height: 8px; border-radius: 9999px; background: rgba(255,255,255,.4); cursor: pointer; }
.dot.active { background: var(--earn-red); box-shadow: 0 0 8px rgba(229,9,20,.6); }

@media (max-width: 960px) {
  .earn-cards, .features, .calc { grid-template-columns: 1fr; }
}

/* Mini (home) calculator styling to match earn theme */
.earn-mini input[type=range] { width: 100%; accent-color: var(--earn-red); }
.earn-mini .label-line { display:flex; align-items:center; justify-content:space-between; font-size:.9rem; color:rgba(255,255,255,.8); }
.earn-mini .value { color: var(--earn-gold); font-weight: 700; text-shadow: 0 0 8px rgba(255,215,0,.25); }