:root{
  --bg: #0C0C0D;
  --card: #121216;
  --muted: #A8A8B0;
  --text: #F5F5F5;
  --accent: linear-gradient(90deg,#6a5af9,#18b2de);
  --radius: 14px;
  --maxw: 1000px;
  --pad: 28px;
  --glass: rgba(255,255,255,0.03);
}

/* reset */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}

/* wrapper */
.legal-wrap{
  width: 92%;
  max-width: var(--maxw);
  margin: 80px auto 120px;
}

/* hero */
.legal-hero{
  text-align:left;
  margin-bottom:20px;
}

.legal-hero h1{
  font-size:2.4rem;
  letter-spacing: -0.6px;
  background: var(--accent);
  -webkit-background-clip: text;
  color: transparent;
}

.legal-hero .muted{
  color: var(--muted);
  margin-top:6px;
}

/* card */
.legal-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius: var(--radius);
  padding: var(--pad);
  border: 1px solid rgba(255,255,255,0.03);
  box-shadow: 0 8px 40px rgba(0,0,0,0.45);
  line-height:1.7;
}

.legal-card h2{
  font-size:1.25rem;
  margin-bottom:8px;
  color:var(--text);
}

.legal-card h3{
  margin-top:18px;
  margin-bottom:8px;
  font-size:1rem;
  color:var(--text);
}

.legal-card p{
  color:var(--text);
  margin-bottom:12px;
}

.legal-card ul{ margin-left:18px; margin-bottom:12px; color:var(--text) }
.legal-card li{ margin:8px 0; color:var(--text) }

/* small hr */
.hr{ height:1px; background: rgba(255,255,255,0.03); margin:18px 0; border-radius:2px; }

/* links */
a{ color: #9ecbff; text-decoration:underline; }

/* responsive */
@media (max-width:900px){
  .legal-wrap{ width:94%; margin:100px auto; }
  .legal-hero h1{ font-size:1.8rem; }
  .legal-card{ padding:20px; }
}


.back-btn{
  position: fixed;
  top: 22px;
  left: 22px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 0.95rem;
  color: #fff;
  text-decoration: none;
  backdrop-filter: blur(12px);
  display: flex;
  gap: 6px;
  align-items: center;
  transition: all .28s ease;
  z-index: 9999;
}

.back-btn:hover{
  transform: translateX(-4px);
  background: rgba(255,255,255,0.12);
}

/* responsive */
@media(max-width:600px){
  .back-btn{
    top: 18px;
    left: 16px;
    font-size: .9rem;
    padding: 6px 12px;
  }
}