/* NexusAGI public landing (PUBLIC-SITE-REDO 2026-10-09). Loaded by /index.html only, after
   /account/site.css (which admin pages share - nothing here touches shared selectors outside #splash,
   #try and the landing footer). Light + dark via prefers-color-scheme. No ads, no trackers. */
:root {
  --lp-ink: #0b1220;
  --lp-ink-2: #3c4a5e;
  --lp-bg: #f5f7fb;
  --lp-card: #ffffff;
  --lp-line: #dbe2ec;
  --lp-a: #2563eb;      /* accent (matches site.css) */
  --lp-b: #0e9f8e;      /* second hue for the mesh only */
  --lp-glow: rgba(37, 99, 235, .14);
  --lp-term: #0d1422;
  --lp-term-fg: #dbe6f5;
  --lp-term-muted: #9fb0c6;
}
@media (prefers-color-scheme: dark) {
  :root {
    --lp-ink: #eef3fa;
    --lp-ink-2: #a9b6c7;
    --lp-bg: #080c14;
    --lp-card: #111826;
    --lp-line: #243042;
    --lp-a: #6ea8ff;
    --lp-b: #3fd3bd;
    --lp-glow: rgba(110, 168, 255, .16);
    --lp-term: #060a12;
    --lp-term-fg: #dbe6f5;
    --lp-term-muted: #93a4bb;
  }
}
body { background: var(--lp-bg); }
main.landing { max-width: none; padding: 0; margin: 0; }
#splash { max-width: none; margin: 0; padding: 0; text-align: left; color: var(--lp-ink); }
.lp-wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.lp-sec { padding: 64px 0; }
.lp-sec h2 { font-size: clamp(24px, 3.2vw, 34px); line-height: 1.15; margin: 0 0 8px; letter-spacing: -.01em; }
.lp-sec .lp-sub { color: var(--lp-ink-2); margin: 0 0 28px; max-width: 46ch; }

/* ---------------- hero ---------------- */
.lp-hero { position: relative; overflow: hidden; min-height: min(86vh, 760px); display: flex; align-items: center;
  background: radial-gradient(60% 70% at 72% 40%, var(--lp-glow), transparent 70%); }
.lp-hero .lp-wrap { position: relative; z-index: 2; width: 100%; }
.lp-hero h1 { font-size: clamp(38px, 6.4vw, 72px); line-height: 1.02; letter-spacing: -.03em; margin: 0 0 18px; max-width: 12ch; }
.lp-hero h1 em { font-style: normal; background: linear-gradient(90deg, var(--lp-a), var(--lp-b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-hero .lp-lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--lp-ink-2); max-width: 34ch; margin: 0 0 28px; }
.lp-stage { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.lp-stage canvas, .lp-stage svg { position: absolute; right: -4%; top: 50%; transform: translateY(-50%); width: min(62vw, 720px); height: min(62vw, 720px); }
.lp-stage canvas { opacity: 0; transition: opacity .8s ease; }
.lp-stage.webgl canvas { opacity: 1; }
.lp-stage.webgl svg { opacity: 0; transition: opacity .8s ease; }
.lp-mesh-fallback line { stroke: var(--lp-a); stroke-opacity: .35; stroke-width: 1; }
.lp-mesh-fallback circle { fill: var(--lp-a); }
.lp-mesh-fallback circle.b { fill: var(--lp-b); }
@media (max-width: 760px) {
  .lp-hero { min-height: auto; padding: 48px 0 56px; }
  .lp-stage { opacity: .45; }
  .lp-stage canvas, .lp-stage svg { left: 50%; right: auto; top: 46%; transform: translate(-50%, -50%); width: 560px; height: 560px; }
}

/* ---------------- buttons ---------------- */
.lp-ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.lp-btn { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 20px; border-radius: 12px;
  font-weight: 650; font-size: 16px; text-decoration: none; border: 1px solid var(--lp-line); background: var(--lp-card);
  color: var(--lp-ink); cursor: pointer; margin: 0; transition: transform .15s ease, box-shadow .15s ease; }
.lp-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px var(--lp-glow); text-decoration: none; }
.lp-btn svg { width: 20px; height: 20px; flex: none; }
.lp-btn.go { background: var(--lp-a); border-color: var(--lp-a); color: #fff; }
@media (prefers-color-scheme: dark) { .lp-btn.go { color: #06101f; } }
.lp-btn:focus-visible { outline: 3px solid var(--lp-a); outline-offset: 2px; }

/* ---------------- pillars ---------------- */
.lp-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.lp-card { background: var(--lp-card); border: 1px solid var(--lp-line); border-radius: 16px; padding: 22px; }
.lp-card h3 { margin: 14px 0 6px; font-size: 19px; }
.lp-card p { margin: 0; color: var(--lp-ink-2); font-size: 15px; }
.lp-ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--lp-a) 18%, transparent), color-mix(in srgb, var(--lp-b) 18%, transparent)); }
.lp-ico svg { width: 30px; height: 30px; stroke: var(--lp-a); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------- try console ---------------- */
.lp-try { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--lp-a) 6%, transparent)); }
.lp-term { background: var(--lp-term); color: var(--lp-term-fg); border-radius: 16px; border: 1px solid var(--lp-line);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25); overflow: hidden; max-width: 820px; }
.lp-term-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 13px; color: var(--lp-term-muted); }
.lp-term-bar i { width: 10px; height: 10px; border-radius: 50%; background: #2b3647; display: inline-block; }
.lp-term-bar .lp-meter { margin-left: auto; font-variant-numeric: tabular-nums; }
#tryLog { height: 320px; overflow-y: auto; padding: 16px; font-size: 15px; }
#tryLog .t-row { margin: 0 0 12px; white-space: pre-wrap; word-wrap: break-word; }
#tryLog .t-you { color: #9cc3ff; }
#tryLog .t-you::before { content: "› "; color: var(--lp-term-muted); }
#tryLog .t-agi { color: var(--lp-term-fg); }
#tryLog .t-sys { color: var(--lp-term-muted); font-size: 14px; }
#tryLog .t-sys a { color: #9cc3ff; }
#tryLog code { background: rgba(255,255,255,.08); padding: 0 4px; border-radius: 4px; }
.lp-term form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid rgba(255,255,255,.08); margin: 0; }
.lp-term input { flex: 1; min-height: 46px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  color: var(--lp-term-fg); border-radius: 10px; padding: 0 12px; font-size: 16px; margin: 0; }
.lp-term input::placeholder { color: var(--lp-term-muted); }
.lp-term button { min-height: 46px; margin: 0; border-radius: 10px; background: #6ea8ff; color: #06101f; border: 0; font-weight: 700; padding: 0 18px; }
.lp-term button:disabled { opacity: .5; }
.lp-fine { font-size: 13px; color: var(--lp-ink-2); margin: 10px 0 0; }

/* ---------------- plans ---------------- */
.lp-plan { display: flex; flex-direction: column; gap: 10px; }
.lp-plan.hl { border-color: var(--lp-a); box-shadow: 0 0 0 1px var(--lp-a), 0 12px 40px var(--lp-glow); }
.lp-plan .lp-price { font-size: 30px; font-weight: 750; letter-spacing: -.02em; }
.lp-plan .lp-price small { font-size: 14px; font-weight: 500; color: var(--lp-ink-2); }
.lp-plan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 15px; color: var(--lp-ink-2); }
.lp-plan li { display: flex; gap: 8px; }
.lp-plan li::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 4px; border-radius: 50%;
  background: color-mix(in srgb, var(--lp-b) 25%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' stroke='%230e9f8e' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/12px no-repeat; }
.lp-plan .lp-where { font-size: 12px; color: var(--lp-ink-2); text-transform: uppercase; letter-spacing: .06em; }
#plansNote { color: var(--lp-ink-2); }

/* ---------------- milestones ---------------- */
.lp-road { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-width: 640px; }
.lp-road li { position: relative; padding: 0 0 24px 40px; font-size: 18px; font-weight: 600; }
.lp-road li::before { content: ""; position: absolute; left: 9px; top: 6px; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--lp-line); background: var(--lp-bg); }
.lp-road li::after { content: ""; position: absolute; left: 16px; top: 24px; bottom: 0; width: 2px; background: var(--lp-line); }
.lp-road li:last-child::after { display: none; }
.lp-road li.done::before { background: var(--lp-b); border-color: var(--lp-b); }
.lp-road li.now::before { background: var(--lp-a); border-color: var(--lp-a); box-shadow: 0 0 0 6px var(--lp-glow); }
.lp-road li span { display: block; font-size: 13px; font-weight: 500; color: var(--lp-ink-2); }

/* ---------------- app band + sign in ---------------- */
.lp-band { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: center; }
@media (max-width: 760px) { .lp-band { grid-template-columns: 1fr; } }
.lp-phone { width: 210px; max-width: 70%; margin: 0 auto; display: block; }
#login.card { max-width: 400px; margin: 0; background: var(--lp-card); border-color: var(--lp-line); border-radius: 16px; }

/* chat app (signed in) takes the page: hide the landing footer behind it */
#app.shown ~ .site-footer { display: none; }
.site-footer.lp-foot { display: flex; flex-wrap: wrap; gap: 6px 4px; justify-content: center; padding: 28px 16px; }

@media (prefers-reduced-motion: reduce) {
  .lp-btn, .lp-stage canvas, .lp-stage svg { transition: none; }
  .lp-btn:hover { transform: none; }
}

/* site.css (shared with admin) styles h2 as a small caps label and stretches form buttons; the landing
   undoes both inside its own sections only. */
.lp-sec h2, .lp-hero h2 { text-transform: none; letter-spacing: -.01em; color: var(--lp-ink); border: 0; padding: 0; }
#login h2 { font-size: 22px; margin-bottom: 14px; }
.lp-term form button { width: auto; flex: none; }
.lp-term input { width: auto; min-width: 0; }
.lp-card h3 { color: var(--lp-ink); }

.landing section.lp-sec, .landing section.lp-hero { background-color: transparent; border: 0; border-radius: 0; box-shadow: none; margin: 0; }
.landing section.lp-try { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--lp-a) 6%, transparent)); }
.landing section.lp-hero { background: radial-gradient(60% 70% at 72% 40%, var(--lp-glow), transparent 70%); }