:root{
  --bg:#0b0f17;
  --bg2:#070a10;
  --card:rgba(18,24,38,.82);
  --border:rgba(255,255,255,.08);
  --txt:#e6eefc;
  --mut:#9bb0d0;
  --acc:#34d399;
  --warn:#f59e0b;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial;
  color:var(--txt);

  /* layered backgrounds: dark overlay + image */
  background:
    radial-gradient(circle at 20% 20%, rgba(52,211,153,0.08), transparent 45%),
    linear-gradient(rgba(7,10,16,0.78), rgba(7,10,16,0.92)),
    url("/bg.jpeg") center / cover no-repeat;

  /* keep overall dark theme if image fails */
  background-color: #0b0f17;
  background-position: center 65%;
  min-height:100vh;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background: radial-gradient(circle at center, transparent 35%, rgba(0,0,0,0.35) 100%);
}
a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:900px;margin:0 auto;padding:28px}
.header{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;position:relative}
.brand{display:flex;flex-direction:column;gap:6px;position:relative;z-index:1}
h1{margin:0;font-size:48px;letter-spacing:.3px;position:relative}
h1::before{
  content:"";
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:120px;height:120px;
  background:radial-gradient(circle,rgba(52,211,153,.15) 0%,transparent 70%);
  pointer-events:none;
  z-index:-1;
}
.tagline{color:var(--mut);font-size:16px}
.badge{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background:linear-gradient(135deg,rgba(52,211,153,.12) 0%,rgba(52,211,153,.05) 100%);
  border:1px solid rgba(52,211,153,.2);
  box-shadow:0 0 20px rgba(52,211,153,.1),inset 0 1px 0 rgba(255,255,255,.05);
  color:var(--txt);
  font-size:12px;
  white-space:nowrap;
}
.card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px;
  margin:16px 0;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
}
h2{margin:0 0 10px;font-size:22px}
p,li{color:var(--mut);line-height:1.55}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.step{
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
  background:rgba(255,255,255,.02);
  transition:transform .2s ease,box-shadow .2s ease;
  position:relative;
}
.step:hover{
  transform:translateY(-3px);
}
.step::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg,rgba(52,211,153,.4),transparent);
  border-radius:14px 14px 0 0;
}
.step strong{color:var(--txt);display:block;font-size:15px;margin-bottom:4px}
.step-num{font-size:28px;font-weight:700;color:var(--acc);display:block;margin-bottom:8px}
.hr{height:1px;background:var(--border);margin:14px 0}
.footer{border-top:1px solid var(--border);padding-top:14px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;color:var(--mut);font-size:12px}
.footer-links{text-align:left}
.footer-support{text-align:right}
.small{font-size:13px}
.warn{color:var(--warn)}

@media (max-width: 820px){
  body{
    background-position: center 55%;
  }
  .card{
    background: rgba(18,24,38,0.88);
    backdrop-filter: none;
  }
  .grid{grid-template-columns:1fr}
  h1{font-size:38px}
  h1::before{width:100px;height:100px}
}

/* Legal pages - plain background */
body.legal{
  background: linear-gradient(180deg,var(--bg),var(--bg2));
}