/* Process Steps — design values (.process-grid). */

.qlegy .qlg-process__grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 80px;
  align-items: start;
}
.qlegy .qlg-process__aside { position: sticky; top: 100px; }
.qlegy .qlg-process__aside-inner {
  padding: 32px;
  border: 1px solid var(--qlegy-line);
  border-radius: var(--qlegy-radius);
  background: var(--qlegy-surface);
}
.qlegy .qlg-process__counter { display: flex; align-items: baseline; gap: 8px; margin-bottom: 24px; }
.qlegy .qlg-process__now { font-size: 80px; line-height: 1; letter-spacing: -0.04em; font-weight: 500; color: var(--qlegy-fg); }
.qlegy .qlg-process__total { font-family: var(--qlegy-mono); font-size: 14px; color: var(--qlegy-fg-mute); }
.qlegy .qlg-process__pill {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  color: var(--qlegy-fg-mute);
  transition: color 0.3s var(--qlegy-ease);
}
.qlegy .qlg-process__pill.is-on { color: var(--qlegy-fg); }
.qlegy .qlg-process__pill.is-done { color: var(--qlegy-fg-dim); }
.qlegy .qlg-process__pill-n { font-family: var(--qlegy-mono); font-size: 11px; }
.qlegy .qlg-process__pill-name { font-size: 16px; letter-spacing: -0.01em; }
.qlegy .qlg-process__pill-line { grid-column: 1 / -1; height: 1px; background: var(--qlegy-line); position: relative; display: block; }
.qlegy .qlg-process__pill-line span { display: block; height: 100%; background: var(--qlegy-fg); width: 0%; transition: width 0.8s var(--qlegy-ease); }

.qlegy .qlg-process__step {
  padding: 100px 0;
  min-height: 80vh;
  opacity: 0.4;
  transition: opacity 0.8s var(--qlegy-ease);
}
.qlegy .qlg-process__step.is-on { opacity: 1; }
.qlegy .qlg-process__step:first-child { padding-top: 0; }
.qlegy .qlg-process__step-num {
  font-family: var(--qlegy-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--qlegy-brand);
}
.qlegy .qlg-process__step-name {
  font-size: calc(clamp(40px, 5vw, 80px) * var(--qlegy-heading-scale, 1));
  letter-spacing: -0.03em;
  line-height: 0.95;
  margin-top: 16px;
}
.qlegy .qlg-process__step-body { max-width: 540px; margin-top: 24px; font-size: 17px; line-height: 1.55; }
.qlegy .qlg-process__step-art {
  margin-top: 48px;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #131314, #0c0c0d);
  border: 1px solid var(--qlegy-line);
  border-radius: var(--qlegy-radius);
  padding: 32px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qlegy .qlg-process__step-art .qlg-card-media__img { position: absolute; inset: 0; border-radius: 0; }

/* Art vignettes */
.qlegy .qlg-pa { width: 100%; height: 100%; position: relative; }
.qlegy .qlg-pa-discovery { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 24px; }
.qlegy .qlg-pa-note { padding: 16px; border-radius: 8px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--qlegy-line); font-family: var(--qlegy-mono); font-size: 12px; color: var(--qlegy-fg-dim); }
.qlegy .qlg-pa-note:nth-child(2) { transform: rotate(1deg); }
.qlegy .qlg-pa-note:nth-child(3) { transform: rotate(-1.5deg); }

.qlegy .qlg-pa-strategy { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(3, 1fr); gap: 6px; padding: 24px; }
.qlegy .qlg-pa-block { background: linear-gradient(135deg, rgba(103, 232, 249, 0.2), rgba(103, 232, 249, 0.05)); border-radius: 4px; animation: qlg-block-in 1s var(--qlegy-ease) backwards; }
@keyframes qlg-block-in {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

.qlegy .qlg-pa-design { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 24px; }
.qlegy .qlg-pa-frame { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--qlegy-line); border-radius: 6px; }
.qlegy .qlg-pa-frame.qlg-f1 { background: linear-gradient(135deg, rgba(103, 232, 249, 0.1), rgba(255, 255, 255, 0.02)); }
.qlegy .qlg-pa-frame.qlg-f2 { background: linear-gradient(135deg, rgba(167, 139, 250, 0.1), rgba(255, 255, 255, 0.02)); }
.qlegy .qlg-pa-frame.qlg-f3 { background: linear-gradient(135deg, rgba(253, 186, 116, 0.1), rgba(255, 255, 255, 0.02)); }

.qlegy .qlg-pa-dev { display: flex; align-items: center; justify-content: center; }
.qlegy .qlg-pa-code { font-family: var(--qlegy-mono); font-size: 14px; color: var(--qlegy-fg); display: flex; flex-direction: column; gap: 8px; line-height: 1.5; direction: ltr; }

.qlegy .qlg-pa-opt { display: flex; align-items: center; justify-content: center; }
.qlegy .qlg-pa-circle { position: relative; width: 200px; height: 200px; }
.qlegy .qlg-pa-circle svg { width: 100%; height: 100%; }
.qlegy .qlg-pa-circle-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 56px; letter-spacing: -0.04em; color: var(--qlegy-fg); }

.qlegy .qlg-pa-launch-rocket { position: absolute; bottom: 20%; inset-inline-start: 30%; font-size: 80px; color: var(--qlegy-brand); animation: qlg-rocket 2s var(--qlegy-ease) infinite; }
@keyframes qlg-rocket {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(20px, -20px); }
}
.qlegy .qlg-pa-launch-grid { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px); background-size: 40px 40px; }

@media (max-width: 900px) {
  .qlegy .qlg-process__grid { grid-template-columns: 1fr; gap: 32px; }
  .qlegy .qlg-process__aside { position: static; }
  .qlegy .qlg-process__step { min-height: 0; padding: 60px 0; }
}