/* NovaGraph landing page (index.html #login). Scoped to .lp so the app's styles are untouched.
   Plane colours are the product's own (scene/projection/perspective.ts PLANE_COLORS). */
:root {
  --lp-bg: #070b17; --lp-bg2: #0b1120; --lp-panel: rgba(255,255,255,0.035); --lp-line: rgba(255,255,255,0.08);
  --lp-text: #e6eef8; --lp-muted: rgba(230,238,248,0.68); --lp-dim: rgba(230,238,248,0.48);
  --lp-blue: #5fb4ff; --lp-cyan: #67e8f9; --lp-accent: #7dd3fc;
  --cap: #fcd34d; --app: #f472b6; --svc: #60a5fa; --infra: #2dd4bf; --data: #c084fc;
}
html.lp-on { scroll-behavior: smooth }
html.lp-on body { overflow-y: auto }
.lp { background: radial-gradient(1200px 600px at 75% -10%, rgba(95,180,255,0.14), transparent 60%),
                  radial-gradient(900px 500px at -10% 20%, rgba(103,232,249,0.07), transparent 60%), var(--lp-bg);
      color: var(--lp-text); font-size: 15px; line-height: 1.6; min-height: 100vh }
.lp *, .lp *::before, .lp *::after { box-sizing: border-box }
.lp a { color: inherit; text-decoration: none }
.lp-container { width: min(1180px, 100%); margin: 0 auto; padding: 0 24px }
.lp-skip { position: absolute; left: -999px; top: 8px; background: var(--lp-blue); color: #021; padding: 8px 12px; border-radius: 6px; z-index: 100 }
.lp-skip:focus { left: 8px }

/* nav */
.lp-nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(10px); background: rgba(7,11,23,0.72); border-bottom: 1px solid var(--lp-line) }
.lp-nav .lp-container { display: flex; align-items: center; gap: 28px; height: 64px }
.lp-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; letter-spacing: .2px }
.lp-brand svg { width: 28px; height: 23px }
.lp-brand small { display: block; font-size: 10.5px; font-weight: 500; letter-spacing: 1.6px; color: #9fb3ff; margin-top: -3px }
.lp-links { display: flex; gap: 22px; margin-left: auto; font-size: 14px; color: var(--lp-muted) }
.lp-links a:hover { color: var(--lp-text) }
.lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 10px; font-weight: 600; font-size: 14.5px; cursor: pointer; border: 1px solid transparent; transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease }
.lp-btn-primary { background: var(--lp-blue); color: #04121f; box-shadow: 0 8px 24px rgba(95,180,255,0.25) }
.lp-btn-primary:hover { background: #7cc3ff; transform: translateY(-1px) }
.lp-btn-ghost { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.14); color: var(--lp-text) }
.lp-btn-ghost:hover { border-color: rgba(125,211,252,0.5) }
.lp :focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; border-radius: 6px }

/* hero */
.lp-hero { padding: 72px 0 40px }
.lp-hero-grid { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 44px; align-items: center }
.lp-hero-stack { display: flex; flex-direction: column; gap: 48px }
.lp-hero-stack > div:first-child { max-width: 760px }
.lp-hero-stack .lp-shot { width: 100% }
.lp-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; letter-spacing: .4px; color: var(--lp-accent); padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(125,211,252,0.28); background: rgba(125,211,252,0.06) }
.lp-eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: var(--lp-cyan); box-shadow: 0 0 10px var(--lp-cyan) }
.lp h1 { font-size: clamp(32px, 3.8vw, 46px); line-height: 1.07; letter-spacing: -1.2px; margin: 18px 0 18px; font-weight: 750 }
.lp h1 .grad { background: linear-gradient(90deg, #7dd3fc, #5fb4ff 45%, #a5b4fc); -webkit-background-clip: text; background-clip: text; color: transparent }
.lp-lead { font-size: 18px; line-height: 1.6; color: var(--lp-muted); max-width: 560px; margin: 0 }
.lp-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px }
.lp-proof { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 26px; font-size: 13px; color: var(--lp-dim) }
.lp-proof b { color: var(--lp-text); font-weight: 600 }
.lp-shot { position: relative; border-radius: 14px; border: 1px solid rgba(125,211,252,0.18); background: #05070f; box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.03), 0 0 80px rgba(95,180,255,0.12); overflow: hidden }
.lp-shot-bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: rgba(255,255,255,0.04); border-bottom: 1px solid var(--lp-line); font-size: 11.5px; color: var(--lp-dim) }
.lp-shot-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.14) }
.lp-shot-bar span { margin-left: 10px }
.lp-shot img { display: block; width: 100%; height: auto }
.lp-shot-tag { position: absolute; left: 14px; bottom: 14px; font-size: 12px; padding: 6px 10px; border-radius: 8px; background: rgba(7,11,23,0.85); border: 1px solid var(--lp-line); color: var(--lp-muted) }
.lp-shot-tag b { color: var(--lp-text) }

/* sections */
.lp-section { padding: 88px 0 }
.lp-section.alt { background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.0)); border-top: 1px solid var(--lp-line); border-bottom: 1px solid var(--lp-line) }
.lp-kicker { font-size: 12.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--lp-accent); font-weight: 600 }
.lp h2 { font-size: clamp(26px, 3vw, 38px); line-height: 1.15; letter-spacing: -.6px; margin: 10px 0 14px; font-weight: 720; max-width: 760px }
.lp-sub { color: var(--lp-muted); max-width: 680px; margin: 0; font-size: 16.5px }
.lp-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px }
.lp-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 40px }
.lp-card { background: var(--lp-panel); border: 1px solid var(--lp-line); border-radius: 14px; padding: 22px; transition: border-color .2s ease, transform .2s ease }
.lp-card:hover { border-color: rgba(125,211,252,0.28) }
.lp-card h3 { margin: 12px 0 6px; font-size: 16.5px; font-weight: 650; letter-spacing: -.1px }
.lp-card p { margin: 0; color: var(--lp-muted); font-size: 14.5px; line-height: 1.55 }
.lp-ico { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(125,211,252,0.1); border: 1px solid rgba(125,211,252,0.2); color: var(--lp-accent) }
.lp-ico svg { width: 20px; height: 20px }
.lp-problem .lp-ico { background: rgba(251,146,60,0.08); border-color: rgba(251,146,60,0.22); color: #fdba74 }

/* four planes */
.lp-planes { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 48px; align-items: center; margin-top: 36px }
.lp-diagram { width: 100%; height: auto; display: block }
.lp-legend { display: flex; flex-direction: column; gap: 14px }
.lp-legend-row { display: grid; grid-template-columns: 14px 1fr; gap: 12px; align-items: start }
.lp-legend-row i { width: 12px; height: 12px; border-radius: 3px; margin-top: 6px }
.lp-legend-row b { display: block; font-size: 15.5px; font-weight: 650 }
.lp-legend-row span { color: var(--lp-muted); font-size: 14px }
.lp-rel { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--lp-line); font-size: 13.5px; color: var(--lp-dim); display: flex; flex-direction: column; gap: 6px }
.lp-rel code { font-size: 12.5px; color: var(--lp-text); background: rgba(255,255,255,0.05); padding: 1px 6px; border-radius: 5px }

/* connect -> model -> act */
.lp-flow { display: grid; grid-template-columns: 1fr 56px 1fr 56px 1fr; align-items: stretch; margin-top: 44px }
.lp-step { background: var(--lp-panel); border: 1px solid var(--lp-line); border-radius: 14px; padding: 22px }
.lp-step .n { font-size: 12px; color: var(--lp-accent); letter-spacing: 1.2px; font-weight: 600 }
.lp-step h3 { margin: 4px 0 12px; font-size: 19px }
.lp-step ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--lp-muted) }
.lp-step li { display: flex; gap: 8px }
.lp-step li::before { content: ''; flex: none; width: 6px; height: 6px; margin-top: 8px; border-radius: 50%; background: var(--lp-accent) }
.lp-step li.opt::before { background: transparent; border: 1px solid var(--lp-accent) }
.lp-arrow { display: flex; align-items: center; justify-content: center }
.lp-arrow svg { width: 56px; height: 24px }

/* highlights */
.lp-hl { display: flex; flex-direction: column; gap: 16px }
.lp-hl .lp-mini { border-radius: 10px; background: rgba(0,0,0,0.25); border: 1px solid var(--lp-line); padding: 8px }
.lp-hl .lp-mini svg { width: 100%; height: auto; display: block }
.lp-note { font-size: 12px; color: var(--lp-dim); margin-top: 4px }

/* now / planned */
.lp-status { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; margin-top: 36px }
.lp-status ul { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 9px; font-size: 14.5px }
.lp-status li { display: flex; gap: 10px; color: var(--lp-muted) }
.lp-status li b { color: var(--lp-text); font-weight: 600 }
.lp-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px }
.lp-badge.now { color: #86efac; background: rgba(74,222,128,0.1); border: 1px solid rgba(74,222,128,0.28) }
.lp-badge.next { color: #c4b5fd; background: rgba(167,139,250,0.1); border: 1px solid rgba(167,139,250,0.28) }
.lp-tick { flex: none; color: #86efac }
.lp-plan { flex: none; color: #c4b5fd }

/* final cta, footer */
.lp-final { text-align: center; padding: 90px 0 }
.lp-final h2 { margin-left: auto; margin-right: auto }
.lp-final .lp-sub { margin: 0 auto }
.lp-final .lp-cta { justify-content: center }
.lp-footer { border-top: 1px solid var(--lp-line); padding: 28px 0; font-size: 13px; color: var(--lp-dim) }
.lp-footer .lp-container { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap }

/* sign-in modal (the form keeps its ids: index.html's script signs in exactly as before) */
.lp-modal { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(2,6,16,0.72); backdrop-filter: blur(4px) }
.lp-modal.open { display: flex; animation: lp-fade .18s ease }
.lp-modal .login { width: min(400px, 100%); background: #0e1324; border: 1px solid rgba(123,140,255,0.28); padding: 28px; border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,0.6); position: relative; animation: lp-rise .22s ease }
.lp-modal .login h1 { margin: 0 0 4px 0; font-size: 22px; letter-spacing: -.3px }
.lp-modal .login label { display: block; font-size: 13.5px; margin-top: 14px; color: var(--lp-muted) }
.lp-modal .login input { width: 100%; padding: 10px 12px; margin-top: 6px; border-radius: 9px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.03); color: inherit; font-size: 15px }
.lp-modal .login input:focus { outline: 2px solid rgba(125,211,252,0.6); outline-offset: 1px }
.lp-modal .login button[type=submit] { margin-top: 20px; width: 100%; height: 44px; border-radius: 10px; border: none; background: var(--lp-blue); color: #04121f; font-weight: 700; font-size: 15px; cursor: pointer }
.lp-modal .login button[type=submit]:disabled { opacity: .6; cursor: wait }
.lp-modal .lp-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--lp-line); background: transparent; color: var(--lp-muted); cursor: pointer; font-size: 16px }
.lp-modal .small { font-size: 13px; color: var(--lp-muted) }
.lp-modal .tip { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--lp-line) }
.lp-modal .error { color: #fecaca; margin-top: 10px; font-size: 13.5px }

/* motion: flowing diagram lines, pulses, reveal on scroll */
.fl { stroke-dasharray: 5 7; animation: lp-flow 1.6s linear infinite }
.fl.slow { animation-duration: 2.6s }
.fl.rev { animation-direction: reverse }
.pulse { transform-box: fill-box; transform-origin: center; animation: lp-pulse 2.4s ease-out infinite }
.pulse.d2 { animation-delay: .8s }
.pulse.d3 { animation-delay: 1.6s }
.glow { animation: lp-glow 3s ease-in-out infinite }
.bar { transform-box: fill-box; transform-origin: left; animation: lp-bar 1.4s cubic-bezier(.2,.8,.2,1) both }
html.lp-js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease }
html.lp-js .reveal.in { opacity: 1; transform: none }
@keyframes lp-flow { to { stroke-dashoffset: -24 } }
@keyframes lp-pulse { 0% { opacity: .7; transform: scale(.6) } 100% { opacity: 0; transform: scale(2.6) } }
@keyframes lp-glow { 0%, 100% { opacity: .55 } 50% { opacity: 1 } }
@keyframes lp-bar { from { transform: scaleX(0) } }
@keyframes lp-fade { from { opacity: 0 } }
@keyframes lp-rise { from { opacity: 0; transform: translateY(10px) scale(.98) } }
@media (prefers-reduced-motion: reduce) {
  html.lp-on { scroll-behavior: auto }
  .fl, .pulse, .glow, .bar, .lp-modal.open, .lp-modal .login { animation: none !important }
  .pulse { opacity: 0 }
  html.lp-js .reveal { opacity: 1; transform: none; transition: none }
}

/* responsive */
@media (max-width: 1000px) {
  .lp-hero-grid, .lp-planes { grid-template-columns: 1fr; gap: 36px }
  .lp-grid3 { grid-template-columns: 1fr 1fr }
  .lp-flow { grid-template-columns: 1fr; gap: 12px }
  .lp-arrow { transform: rotate(90deg); height: 40px }
  .lp-status { grid-template-columns: 1fr }
}
@media (max-width: 760px) {
  .lp-links { display: none }
  .lp-nav .lp-container { justify-content: space-between }
  .lp-hero { padding-top: 40px }
  .lp-section { padding: 64px 0 }
  .lp-grid3, .lp-grid2 { grid-template-columns: 1fr }
  .lp-container { padding: 0 16px }
  .lp-lead { font-size: 16.5px }
  .lp-shot-tag { position: static; display: block; border: none; border-top: 1px solid var(--lp-line); border-radius: 0 }
}