/* About page styles */
.about-content{
  max-width:1000px;
  margin:0 auto;
  padding:0 20px;
}

.about-hero{
  text-align:center;
  margin-bottom:48px;
}

.about-title{
  margin:0 0 12px;
  font-size:clamp(32px,5vw,48px);
  font-weight:800;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.about-subtitle{
  margin:0;
  font-size:clamp(16px,2.5vw,20px);
  color:var(--muted);
  max-width:600px;
  margin:0 auto;
}

.about-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px;
  margin-bottom:48px;
  max-width:1000px;
  margin-left:auto;
  margin-right:auto;
}

@media (min-width:900px){
  .about-grid{
    grid-template-columns:repeat(3,1fr);
  }
}

.about-card{
  padding:24px;
  border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.03));
  border:1px solid rgba(255,255,255,0.08);
  backdrop-filter:blur(8px) saturate(120%);
  box-shadow:var(--shadow);
  text-align:center;
}

.card-icon{
  font-size:32px;
  margin-bottom:16px;
  display:block;
}

.about-card h3{
  margin:0 0 12px;
  font-size:18px;
  font-weight:700;
}

.about-card p{
  margin:0;
  color:var(--muted);
  line-height:1.6;
}

.rules-section, .getting-started{
  margin-bottom:48px;
}

.rules-section h2, .getting-started h2{
  margin:0 0 24px;
  font-size:28px;
  font-weight:700;
  text-align:center;
}

.rules-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;
  max-width:1200px;
  margin:0 auto;
}

@media (min-width:900px){
  .rules-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media (min-width:1200px){
  .rules-grid{
    grid-template-columns:repeat(3,1fr);
  }
}

.rule-item{
  padding:20px;
  background:rgba(0,0,0,0.2);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
}

.rule-header{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}

.rule-icon{
  font-size:20px;
}

.rule-item p{
  margin:0;
  color:var(--muted);
}

.steps{
  display:grid;
  gap:24px;
}

.step{
  display:flex;
  gap:20px;
  align-items:flex-start;
}

.step-number{
  flex-shrink:0;
  width:40px;
  height:40px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  color:#000;
}

.step-content h4{
  margin:0 0 8px;
  font-size:18px;
  font-weight:700;
}

.step-content p{
  margin:0;
  color:var(--muted);
  line-height:1.6;
}

.warning-section{
  margin-bottom:48px;
}

.warning-box{
  background:linear-gradient(135deg,rgba(255,165,0,0.1),rgba(255,69,0,0.08));
  border:1px solid rgba(255,165,0,0.3);
  border-radius:12px;
  padding:24px;
  text-align:center;
}

.warning-box h3{
  margin:0 0 12px;
  color:#ffa500;
  font-size:20px;
  font-weight:700;
}

.warning-box p{
  margin:0;
  color:var(--text);
  line-height:1.6;
}

.cta-section{
  text-align:center;
  margin-bottom:48px;
}

.cta-large{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:16px 32px;
  background:linear-gradient(90deg,rgba(0,255,162,0.2),rgba(0,194,255,0.2));
  border:2px solid rgba(0,255,162,0.4);
  border-radius:16px;
  color:var(--text);
  text-decoration:none;
  font-weight:700;
  font-size:18px;
  letter-spacing:.4px;
  transition:all .3s ease;
  box-shadow:0 8px 28px rgba(0,255,162,0.15);
}

.cta-large:hover{
  transform:translateY(-2px);
  border-color:rgba(0,255,162,0.6);
  box-shadow:0 12px 35px rgba(0,255,162,0.25);
}

.cta-arrow{
  font-size:20px;
  transition:transform .3s ease;
}

.cta-large:hover .cta-arrow{
  transform:translateX(4px);
}