:root{
  --atlas-bg:#0f1220;
  --atlas-card:#151a2c;
  --atlas-ink:#eef3ff;
  --atlas-dim:#a7b2c9;
  --atlas-accent:#34c8ff;
  --atlas-ink-2:#dce6ff;
  --atlas-br:16px;
  --atlas-bd:rgba(255,255,255,.08);
  --atlas-shadow:0 24px 60px rgba(0,0,0,.35);
  --atlas-max:920px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  background:radial-gradient(1200px 800px at 10% 0%, #101633 0, #0f1220 50%, #0f1220 100%);
  color:var(--atlas-ink);
  line-height:1.75;
}

.atlas-wrap{
  max-width:var(--atlas-max);
  margin:0 auto;
  padding:28px 18px 48px;
}

.atlas-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}
.atlas-brand{
  font-weight:800;
  color:#fff;
  background:linear-gradient(90deg,#fff,var(--atlas-accent));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-decoration:none;
}
.atlas-title{
  margin:0;
  font-size:clamp(26px,4vw,40px);
  font-weight:800;
  letter-spacing:.2px;
}

.atlas-content{
  background:linear-gradient(180deg,rgba(21,26,44,.8),rgba(21,26,44,.6));
  border:1px solid var(--atlas-bd);
  border-radius:var(--atlas-br);
  padding:26px;
  box-shadow:var(--atlas-shadow);
}

h2{
  font-size:clamp(18px,2.4vw,24px);
  margin:22px 0 8px;
  color:var(--atlas-ink-2);
}
p{margin:0 0 12px}
a{color:var(--atlas-accent);text-decoration:none}
a:hover{text-decoration:underline}

.atlas-cta{
  display:flex;
  gap:12px;
  margin-top:18px;
}
.atlas-btn{
  display:inline-block;
  padding:10px 14px;
  border-radius:12px;
  background:var(--atlas-accent);
  color:#001222;
  font-weight:700;
}
.atlas-btn.ghost{
  background:transparent;
  border:1px solid var(--atlas-bd);
  color:var(--atlas-ink);
}

.atlas-foot{
  display:flex;
  justify-content:flex-end;
  margin-top:16px;
  color:var(--atlas-dim);
}

@media (max-width:560px){
  .atlas-content{padding:18px}
}