/* PreflightX landing — same night cockpit skin as the app. */

:root{
  --sx-bg:#0b1018;
  --sx-surface:#121a28;
  --sx-surface2:#182336;
  --sx-border:#243248;
  --sx-border2:#31435f;
  --sx-text:#e8edf5;
  --sx-muted:#8d9ab0;
  --sx-muted2:#a7b3c7;
  --sx-faint:#5d6b82;
  --sx-accent:#ffb547;
  --sx-accent2:#4db8ff;
  --sx-accent-ink:#221503;
  --sx-accent-soft:#251c0d;
  --sx-accent-hover:#ffc266;
  --sx-glow-1:#c98a2e;
  --sx-glow-2:#2e6fd9;
  --sx-page-max:1020px;
}

.sx-topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:12px;
  padding:12px 22px;background:color-mix(in srgb,var(--sx-bg) 78%,transparent);
  backdrop-filter:blur(14px) saturate(1.15);border-bottom:1px solid var(--sx-border)}
.sx-brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:17px}
.pfx-dot{width:9px;height:9px;border-radius:50%;background:var(--sx-accent);
  box-shadow:0 0 10px var(--sx-accent),0 0 22px rgba(255,181,71,.45)}
.sx-brand .bx{color:var(--sx-accent)}

.wrap{max-width:var(--sx-page-max);margin:0 auto;padding:0 24px 40px}

.hero{text-align:center;padding:74px 0 56px}
.hero-icon{border-radius:24px;box-shadow:var(--sx-shadow);margin-bottom:18px}
.sx-chip.beta{display:inline-block;color:var(--sx-accent);border-color:color-mix(in srgb,var(--sx-accent) 45%,var(--sx-border));margin-bottom:14px}
.hero h1{font-size:clamp(34px,6vw,54px);line-height:1.08;margin:0 0 16px;letter-spacing:-.5px}
.lede{max-width:560px;margin:0 auto 28px;color:var(--sx-muted);font-size:17px;line-height:1.55}
.cta{display:flex;flex-direction:column;align-items:center;gap:10px}
.btn-big{font-size:17px;padding:14px 30px}
.cta-sub{color:var(--sx-faint);font-size:13px}

.features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:10px 0 40px}
@media (max-width:820px){.features{grid-template-columns:1fr}}
.feat{padding:22px}
.feat .lamp{display:block;margin-bottom:12px}
.feat h3{margin:0 0 8px;font-size:17px}
.feat p{margin:0;color:var(--sx-muted);font-size:14px;line-height:1.55}

.lamp{width:10px;height:10px;border-radius:50%;background:var(--sx-faint)}
.lamp.ok{background:var(--sx-ok);box-shadow:0 0 8px var(--sx-ok),0 0 18px rgba(61,220,132,.35)}
.lamp.warn{background:var(--sx-accent);box-shadow:0 0 8px var(--sx-accent)}
.lamp.busy{background:var(--sx-accent2);box-shadow:0 0 8px var(--sx-accent2)}

.shots{display:grid;grid-template-columns:1.35fr 1fr;gap:16px;margin-bottom:44px;align-items:start}
@media (max-width:820px){.shots{grid-template-columns:1fr}}
.shot{padding:10px;margin:0}
.shot img{width:100%;display:block;border-radius:calc(var(--sx-radius) - 6px);border:1px solid var(--sx-border)}
.shot figcaption{padding:10px 6px 4px;color:var(--sx-muted);font-size:13px;text-align:center}

.steps{display:flex;justify-content:center;gap:34px;flex-wrap:wrap;margin-bottom:36px}
.step{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;max-width:200px}
.step .n{width:34px;height:34px;border-radius:50%;background:var(--sx-surface2);border:1px solid var(--sx-border2);
  display:flex;align-items:center;justify-content:center;font-family:var(--sx-mono);color:var(--sx-accent);margin-bottom:6px}
.step b{font-size:15px}
.step span:last-child{color:var(--sx-muted);font-size:13px}

.fineprint{max-width:560px;margin:0 auto;text-align:center;color:var(--sx-faint);font-size:12.5px;line-height:1.6}