{% extends 'base.html' %}{% load static %}
{% block title %}Welcome — Unity Nation{% endblock %}
{% block extra_css %}
.wo-wrap{min-height:calc(100vh - 64px);display:flex;align-items:center;justify-content:center;padding:50px 20px}
.wo-card{max-width:540px;text-align:center;animation:fadeUp .5s ease}
.wo-emoji{font-size:4rem;margin-bottom:20px;animation:floatY 3s ease-in-out infinite}
.wo-steps{background:var(--panel);border:1px solid var(--border);border-radius:var(--rl);padding:26px;margin-bottom:30px;text-align:left;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.wo-step{display:flex;align-items:flex-start;gap:13px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.wo-step:last-child{border-bottom:none}
.wo-icon{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:.9rem}
{% endblock %}
{% block content %}
<div class="wo-wrap">
<div class="wo-card">
  <div class="wo-emoji">🎉</div>
  <h1 style="font-family:var(--ff);font-size:2rem;font-weight:700;letter-spacing:-.025em;margin-bottom:12px">Welcome to Unity Nation!</h1>
  <p style="color:var(--muted);font-size:1rem;margin-bottom:30px;line-height:1.65">Your account has been activated. You can now start earning daily rewards, growing your referral network, and accessing everything Unity Nation has to offer.</p>

  <div class="wo-steps">
    <div style="font-family:var(--ff);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:14px">What happens next</div>
    <div class="wo-step">
      <div class="wo-icon" style="background:rgba(0,200,168,.15);color:var(--teal)"><i class="fas fa-coins"></i></div>
      <div><div style="font-size:.92rem;font-weight:600">$0.20 Daily Reward starts today</div><div style="font-size:.79rem;color:var(--muted)">Credited automatically every day for 100 days</div></div>
    </div>
    <div class="wo-step">
      <div class="wo-icon" style="background:rgba(123,95,230,.18);color:var(--vlt)"><i class="fas fa-users"></i></div>
      <div><div style="font-size:.92rem;font-weight:600">Share your referral link</div><div style="font-size:.79rem;color:var(--muted)">Earn $1 for every activated member you bring in</div></div>
    </div>
    <div class="wo-step">
      <div class="wo-icon" style="background:rgba(245,200,66,.15);color:var(--gold)"><i class="fas fa-store"></i></div>
      <div><div style="font-size:.92rem;font-weight:600">Unlock the Marketplace</div><div style="font-size:.79rem;color:var(--muted)">Get 5 active referrals to unlock buying &amp; selling</div></div>
    </div>
  </div>

  <a href="{% url 'dashboard' %}" class="btn btn-violet btn-lg btn-block"><i class="fas fa-arrow-right"></i>Go to My Dashboard</a>
</div>
</div>
{% endblock %}