/* ScrapCoin feature on the landing page. Coin colours: gunmetal + rust orange. */
.scx { --scx-acc: #d9772b; --scx-card: rgba(12, 22, 12, .75); --scx-line: rgba(217, 119, 43, .28); --scx-text: rgb(220, 211, 202); --scx-muted: rgb(150, 160, 140);
  position: relative; margin: 70px 0; padding: 48px 40px; border: 1px solid var(--scx-line); border-radius: 10px; overflow: hidden;
  background: radial-gradient(ellipse at 18% 40%, rgba(217, 119, 43, .16), transparent 55%), linear-gradient(160deg, rgba(20, 22, 25, .92), rgba(10, 16, 10, .92)); }
[data-theme="light"] .scx { --scx-card: #f4faf4; --scx-line: rgba(217, 119, 43, .35); --scx-text: #1a2a1a; --scx-muted: #4a5a4a;
  background: radial-gradient(ellipse at 18% 40%, rgba(217, 119, 43, .14), transparent 55%), #fbf7f2; }
.scx * { box-sizing: border-box; }

/* hero: coin stage + copy */
.scx-hero { display: grid; grid-template-columns: 340px 1fr; gap: 40px; align-items: center; }
@media (max-width: 860px) { .scx-hero { grid-template-columns: 1fr; text-align: center; } .scx { padding: 34px 20px; } }
.scx-stage { position: relative; height: 320px; perspective: 900px; }
.scx-glow { position: absolute; inset: 15% 15%; border-radius: 50%; background: radial-gradient(circle, rgba(217, 119, 43, .55), transparent 65%); filter: blur(18px); animation: scx-pulse 3.2s ease-in-out infinite; }
.scx-ring { position: absolute; left: 50%; top: 50%; width: 270px; height: 270px; margin: -135px; border-radius: 50%; border: 2px dashed rgba(217, 119, 43, .35); animation: scx-turn 24s linear infinite; }
.scx-coin { position: absolute; left: 50%; top: 50%; width: 190px; height: 190px; margin: -95px; transform-style: preserve-3d; animation: scx-spin 6s cubic-bezier(.45, .05, .55, .95) infinite, scx-bob 3s ease-in-out infinite; }
.scx-face { position: absolute; inset: 0; border-radius: 50%; background: url(coin.png) center/cover; backface-visibility: hidden; box-shadow: inset 0 0 0 5px #d9772b, 0 0 30px rgba(217, 119, 43, .35); }
.scx-front { transform: translateZ(7px); }
.scx-back { transform: rotateY(180deg) translateZ(7px); }
.scx-edge i { position: absolute; inset: 0; border-radius: 50%; background: #8a4716; }
.scx-edge i:nth-child(1) { transform: translateZ(6px); } .scx-edge i:nth-child(2) { transform: translateZ(4.6px); } .scx-edge i:nth-child(3) { transform: translateZ(3.2px); background: #a5571d; }
.scx-edge i:nth-child(4) { transform: translateZ(1.8px); } .scx-edge i:nth-child(5) { transform: translateZ(.4px); background: #a5571d; } .scx-edge i:nth-child(6) { transform: translateZ(-.4px); }
.scx-edge i:nth-child(7) { transform: translateZ(-1.8px); background: #a5571d; } .scx-edge i:nth-child(8) { transform: translateZ(-3.2px); } .scx-edge i:nth-child(9) { transform: translateZ(-4.6px); background: #a5571d; }
.scx-edge i:nth-child(10) { transform: translateZ(-6px); }
.scx-drop { position: absolute; top: -30px; left: var(--x); width: 34px; height: 34px; border-radius: 50%; background: url(coin.png) center/cover; opacity: 0;
  transform: scale(var(--s)); animation: scx-fall 4.8s linear infinite; animation-delay: var(--d); box-shadow: 0 0 10px rgba(217, 119, 43, .4); }

.scx-eyebrow { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--scx-acc);
  border: 1px solid var(--scx-line); padding: 5px 12px; border-radius: 999px; background: rgba(217, 119, 43, .08); }
.scx-title { margin: 14px 0 10px; font-size: 3rem; font-weight: 800; letter-spacing: 3px; color: var(--scx-text); line-height: 1; }
.scx-title span { color: var(--scx-acc); }
.scx-lead { font-size: 1.15rem; line-height: 1.6; color: var(--scx-text); max-width: 560px; margin: 0 0 22px; }
@media (max-width: 860px) { .scx-lead { margin-left: auto; margin-right: auto; } }
.scx-cta { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 860px) { .scx-cta { justify-content: center; } }
.scx-btn { display: inline-block; padding: 12px 24px; border-radius: 4px; background: var(--scx-acc); color: #fff !important; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; font-size: .85rem; text-decoration: none !important; transition: transform .15s, filter .15s; }
.scx-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }
.scx-btn--ghost { background: transparent; border: 1px solid var(--scx-line); color: var(--scx-acc) !important; }

/* four steps with a running connector */
.scx-steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px; }
@media (max-width: 992px) { .scx-steps { grid-template-columns: repeat(2, 1fr); } .scx-line { display: none; } }
@media (max-width: 560px) { .scx-steps { grid-template-columns: 1fr; } }
.scx-line { position: absolute; left: 12%; right: 12%; top: 34px; height: 2px; background: repeating-linear-gradient(90deg, var(--scx-acc) 0 10px, transparent 10px 20px);
  background-size: 40px 2px; opacity: .55; animation: scx-run 1.2s linear infinite; }
.scx-step { position: relative; background: var(--scx-card); border: 1px solid var(--scx-line); border-radius: 8px; padding: 20px; text-align: center;
  opacity: 0; transform: translateY(14px); animation: scx-in .7s ease forwards; }
.scx-step:nth-child(2) { animation-delay: .1s; } .scx-step:nth-child(3) { animation-delay: .25s; } .scx-step:nth-child(4) { animation-delay: .4s; } .scx-step:nth-child(5) { animation-delay: .55s; }
.scx-ic { width: 52px; height: 52px; margin: -2px auto 12px; border-radius: 50%; display: grid; place-items: center; background: #1d1612; border: 2px solid var(--scx-acc); }
[data-theme="light"] .scx-ic { background: #fff4ea; }
.scx-ic svg { width: 24px; height: 24px; fill: var(--scx-acc); }
.scx-step h3 { font-size: 1rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--scx-text); margin: 0 0 8px; }
.scx-step p { font-size: .9rem; line-height: 1.5; color: var(--scx-muted); margin: 0; }
.scx-step b { color: var(--scx-text); }

/* explainer */
.scx-faq { margin-top: 26px; border: 1px solid var(--scx-line); border-radius: 8px; background: var(--scx-card); }
.scx-faq summary { cursor: pointer; padding: 14px 18px; font-weight: 700; color: var(--scx-text); list-style: none; }
.scx-faq summary::-webkit-details-marker { display: none; }
.scx-faq summary::after { content: "+"; float: right; color: var(--scx-acc); font-size: 1.2rem; line-height: 1; }
.scx-faq[open] summary::after { content: "−"; }
.scx-faq > div { padding: 0 18px 16px; color: var(--scx-muted); line-height: 1.6; }
.scx-faq b { color: var(--scx-text); }
.scx-small { font-size: .8rem; opacity: .85; }

@keyframes scx-spin { 0% { transform: rotateY(0) } 45% { transform: rotateY(180deg) } 50% { transform: rotateY(180deg) } 95% { transform: rotateY(360deg) } 100% { transform: rotateY(360deg) } }
@keyframes scx-bob { 0%, 100% { margin-top: -95px } 50% { margin-top: -108px } }
@keyframes scx-pulse { 0%, 100% { opacity: .6; transform: scale(.95) } 50% { opacity: 1; transform: scale(1.05) } }
@keyframes scx-turn { to { transform: rotate(360deg) } }
@keyframes scx-fall { 0% { opacity: 0; transform: translateY(0) rotate(0) scale(var(--s)) } 10% { opacity: .9 } 85% { opacity: .9 } 100% { opacity: 0; transform: translateY(340px) rotate(540deg) scale(var(--s)) } }
@keyframes scx-run { to { background-position: 40px 0 } }
@keyframes scx-in { to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .scx-coin, .scx-ring, .scx-glow, .scx-drop, .scx-line { animation: none !important; } .scx-drop { display: none; } .scx-step { animation: none; opacity: 1; transform: none; } }

/* small screens */
.scx-hero > *, .scx-steps > * { min-width: 0; }
.scx-title { font-size: clamp(2rem, 9vw, 3rem); letter-spacing: 2px; }
@media (max-width: 560px) {
  .scx { margin: 40px 0; padding: 26px 14px; }
  .scx-stage { height: 250px; }
  .scx-ring { width: 220px; height: 220px; margin: -110px; }
  .scx-coin { width: 150px; height: 150px; margin: -75px; }
  @keyframes scx-bob { 0%, 100% { margin-top: -75px } 50% { margin-top: -86px } }
  .scx-lead { font-size: 1rem; }
  .scx-btn { padding: 11px 16px; font-size: .78rem; }
  .scx-step { padding: 16px; }
}