.vz2-wrap { width: min(1240px, calc(100% - 32px)); margin: 0 auto; }
.vz2-section { padding: 28px 0; }
.vz2-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--vz2-grid-gap); }
.vz2-span-3 { grid-column: span 3; }
.vz2-span-4 { grid-column: span 4; }
.vz2-span-6 { grid-column: span 6; }
.vz2-span-8 { grid-column: span 8; }
.vz2-span-12 { grid-column: 1 / -1; }
.vz2-card { padding: 18px; }
.vz2-title { margin: 0 0 8px; font-size: clamp(20px, 2vw, 28px); line-height: 1.12; text-wrap: balance; }
.vz2-muted { color: var(--vz2-muted); }
.vz2-btn {
  min-height: var(--vz2-control-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--vz2-accent) 42%, var(--vz2-line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--vz2-accent) 14%, transparent);
  color: var(--vz2-txt);
  font-weight: 720;
  text-decoration: none;
  cursor: pointer;
}
.vz2-btn:hover { background: color-mix(in srgb, var(--vz2-accent) 23%, transparent); }
.vz2-btn[disabled], .vz2-disabled { opacity: .52; cursor: not-allowed; }
.vz2-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--vz2-border-1);
  border-radius: 999px;
  color: #dbeafe;
  background: rgba(255,255,255,.035);
}
.vz2-badge { border-radius: 999px; padding: 4px 9px; font-size: 12px; font-weight: 800; }
.vz2-badge-ok { background: rgba(34,197,94,.15); color: #86efac; }
.vz2-badge-warn { background: rgba(245,158,11,.15); color: #fcd34d; }
.vz2-badge-bad { background: rgba(239,68,68,.15); color: #fca5a5; }
.vz2-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(26px, 5vw, 56px);
  background:
    radial-gradient(circle at 82% 20%, color-mix(in srgb, var(--vz2-accent) 24%, transparent), transparent 32%),
    linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.012)),
    var(--vz2-card);
}
.vz2-hero h1 { margin: 0; max-width: 780px; font-size: clamp(32px, 5vw, 62px); line-height: 1.02; letter-spacing: 0; }
.vz2-hero p { max-width: 720px; color: var(--vz2-muted); }
.vz2-stepper { display: grid; gap: 10px; counter-reset: step; }
.vz2-stepper li { list-style: none; display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: start; }
.vz2-stepper li::before { counter-increment: step; content: counter(step); width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--vz2-accent) 22%, transparent); color: var(--vz2-txt); font-weight: 800; }
.vz2-state-card { display: grid; gap: 8px; min-height: 150px; place-items: center; text-align: center; border: 1px dashed var(--vz2-border-2); border-radius: var(--vz2-radius); background: rgba(255,255,255,.025); }
.vz2-copy-sample { font-family: var(--vz2-font-mono); background: rgba(0,0,0,.22); border-radius: 10px; padding: 10px; overflow: auto; }
.vz2-icon-grid { display: flex; flex-wrap: wrap; gap: 12px; color: var(--vz2-accent); }
.vz2-link-row { display: flex; flex-wrap: wrap; gap: 8px; }
.vz2-demo-img { max-width: 100%; height: auto; }
.vz2-skeleton-demo { height: 86px; }
.vz2-login-main { min-height: 100vh; display: grid; place-items: center; }
.vz2-login-box { width: min(430px, 100%); }
@media (max-width: 840px) {
  .vz2-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .vz2-span-3, .vz2-span-4, .vz2-span-6, .vz2-span-8 { grid-column: span 6; }
}
@media (max-width: 520px) {
  .vz2-wrap { width: min(100% - 20px, 1240px); }
  .vz2-grid { grid-template-columns: 1fr; }
  .vz2-span-3, .vz2-span-4, .vz2-span-6, .vz2-span-8, .vz2-span-12 { grid-column: 1 / -1; }
}