/* =======================
   HOW IT WORKS PAGE
   ======================= */

.hiw-hero{position:relative;min-height:360px;display:flex;align-items:center;overflow:hidden;border-bottom:1px solid #151c26;background:#0b0e13}
.hiw-hero__bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(105%) brightness(.65)}
.hiw-hero__overlay{position:absolute;inset:0;background:
  radial-gradient(1200px 500px at 65% -120px, rgba(124,92,255,.25), transparent 65%),
  radial-gradient(900px 400px at 20% -80px, rgba(25,227,195,.18), transparent 60%),
  linear-gradient(180deg,rgba(10,14,20,.78),rgba(10,14,20,.9))}
.hiw-hero__inner{position:relative;z-index:2;text-align:center;padding:54px 0}
.hiw-hero__title{margin:0 0 10px;font-size:38px;line-height:1.15;font-weight:900}
.hiw-hero__accent{background:linear-gradient(135deg,var(--brand-1),var(--brand-2));-webkit-background-clip:text;background-clip:text;color:#fff}
.hiw-hero__sub{color:#b8c7e6;margin-bottom:16px}

/* Steps */
.hiw-steps{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:22px}
.step-card{display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:16px;background:linear-gradient(180deg,#0f1521,#111827);border:1px solid #1c263c;box-shadow:0 18px 42px rgba(0,0,0,.45);transform:translateY(16px);opacity:0;transition:transform .35s,opacity .35s}
.step-card.inview{transform:translateY(0);opacity:1}
.step-card__icon{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;flex:0 0 auto;color:#0b0f15;background:linear-gradient(135deg,#bda1ff,#7c5cff);box-shadow:0 10px 26px rgba(124,92,255,.28)}
.step-card__icon i{font-size:26px}
.step-card__title{margin:2px 0 6px;font-weight:900}

/* Royalties */
.royalty-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.royalty-card{padding:18px;border-radius:16px;background:#0f1521;border:1px solid #1c263c;box-shadow:0 14px 36px rgba(0,0,0,.4)}
.royalty-title{margin:0 0 6px;font-weight:900}

/* CTA */
.section-cta{background:
  radial-gradient(900px 360px at 25% -80px, rgba(124,92,255,.22), transparent 65%),
  radial-gradient(700px 320px at 80% -60px, rgba(25,227,195,.16), transparent 60%),
  #0d121a;text-align:center}
.cta-title{margin:0 0 10px;font-size:30px;font-weight:900}
.cta-sub{margin-bottom:16px}