.pageHero{
  margin-top: 18px;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 14px;
  align-items:start;
}

.panel{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  border-radius: 22px;
  padding: 18px;
  box-shadow: var(--shadow);
}
.panel h2{margin:0 0 10px; font-size: var(--h2); letter-spacing:-.2px}
.panel p{margin:0; color: var(--muted); font-size: 13.5px; line-height: 1.7}

.media{
  margin-top: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  overflow:hidden;
}
.media img{width:100%; height:auto; display:block}

.list{margin-top:12px; display:grid; gap:10px; font-size:13.5px; color: rgba(255,255,255,.82); line-height:1.55;}
.row{display:flex; gap:10px; align-items:flex-start}
.row i{color: rgba(159,209,255,.95); margin-top:2px; width:18px; text-align:center; flex:0 0 auto}
.sub{color: rgba(255,255,255,.72)}

.miniGrid{margin-top:14px; display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px;}
.miniCard{border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); border-radius: 20px; padding: 16px;}
.miniCard b{display:block; font-size: 14px; margin-bottom:6px}
.miniCard span{display:block; color: var(--muted); font-size: 13px; line-height: 1.65}

.steps{display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px;}
.step{border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); border-radius: 20px; padding: 18px;}
.stepTop{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px}
.stepNum{font-weight:900; letter-spacing:.2px}
.step i{color: rgba(159,209,255,.95)}
.step p{margin:0; color: var(--muted); font-size: 13px; line-height: 1.7}

@media (max-width:980px){
  .pageHero{grid-template-columns:1fr}
  .miniGrid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
}