.step-card { background:rgba(20,20,37,0.7); border:1px solid rgba(255,255,255,0.07); border-radius:20px; overflow:hidden; transition:transform .2s, border-color .2s; }
.step-card:hover { transform:translateY(-3px); border-color:rgba(59,130,246,0.2); }
.step-num  { width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:16px; flex-shrink:0; background:linear-gradient(135deg,#3b82f6,#1d4ed8); box-shadow:0 4px 20px rgba(59,130,246,0.35); }
.step-num-g{ width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:16px; flex-shrink:0; background:linear-gradient(135deg,#10b981,#059669); box-shadow:0 4px 20px rgba(16,185,129,0.3); }
.phase-tag { display:inline-flex; align-items:center; gap:6px; padding:5px 14px; border-radius:999px; font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.tag-install { background:rgba(59,130,246,0.12); border:1px solid rgba(59,130,246,0.25); color:#60a5fa; }
.tag-start   { background:rgba(34,197,94,0.10); border:1px solid rgba(34,197,94,0.20); color:#4ade80; }
.screenshot { display:flex; align-items:center; justify-content:center; background:#0d0d1a; min-height:120px; }
.screenshot img { max-width:100%; width:auto; height:auto; display:block; max-height:400px; object-fit:contain; }
.divider-line { height:1px; background:linear-gradient(90deg,transparent,rgba(59,130,246,0.3),transparent); flex:1; }
.mesh-bg { background:radial-gradient(ellipse at 20% 0%,rgba(59,130,246,0.06) 0%,transparent 60%),radial-gradient(ellipse at 80% 100%,rgba(16,185,129,0.04) 0%,transparent 60%),#0a0a0a; }