/* NorthStar landing — matched to the in-app module dashboard (nsx-type.css) */
@import url('https://fonts.googleapis.com/css2?family=Marcellus+SC&family=Playfair+Display:wght@400;600;700&display=swap');

html:root{
  --bg:#000;--panel:#0d1117;--panel-2:#131922;--panel-3:#1a212c;
  --line:#2a313c;--border:#2a313c;--border-strong:#3a4350;
  --text:#fff;--muted:#c6cdd8;--text-dim:#c6cdd8;--text-faint:#8a93a3;
  --accent:#7cc8ff;--accent-strong:#a9dcff;--accent-dim:rgba(124,200,255,.10);--ink:#03111c;
  --gold:#7cc8ff;--gold-hi:#a9dcff;
  --violet:#b9a4ff;--violet-line:rgba(185,164,255,.38);--violet-hi:rgba(185,164,255,.7);
  --red-glow:rgba(150,18,38,.34);--red-glow-2:rgba(115,10,28,.26);
  --font-head:'Playfair Display',Georgia,'Times New Roman',serif;
  --font-body:'Marcellus SC','Plus Jakarta Sans',Georgia,serif;
}

/* Typography */
html body, html body :not(svg):not(path):not(code):not(kbd):not(#_ns),
html body button, html body input{
  font-family:var(--font-body);-webkit-font-smoothing:antialiased;
}
html body{letter-spacing:.02em;color:var(--text)}
html body h1, html body h2, html body h3, html body h4,
html body h1 *, html body h2 *, html body .flow article strong,
html body .brand span, html body .preview-head strong{
  font-family:var(--font-head) !important;letter-spacing:-.01em;color:#fff;
}
html body h1{font-weight:700;line-height:1.08}
html body h2{font-weight:700;line-height:1.12}
html body h3{font-weight:600}
html body .lead, html body p{color:var(--muted)}
html body .fine{color:var(--text-faint)}
html body .eyebrow, html body .tag, html body .number, html body .preview-number{
  color:var(--accent);font-weight:400 !important;letter-spacing:.14em;
}
html body .preview-number, html body .number{font-variant-numeric:tabular-nums}

/* Background — black with the dashboard's red glow */
html body{
  background:
    radial-gradient(1200px 560px at 88% -12%, var(--red-glow), transparent 62%),
    radial-gradient(900px 620px at -12% 108%, var(--red-glow-2), transparent 60%),
    linear-gradient(#070203 0%, #000 55%, #050102 100%) !important;
  background-attachment:fixed !important;
}
html body section, html body section.alt, html body main, html body footer{background:transparent !important}
html body section.alt{
  background:linear-gradient(180deg, rgba(150,18,38,.07), rgba(0,0,0,0) 70%) !important;
  border-color:rgba(150,18,38,.22) !important;
}

/* Header — matches the app topbar */
html body header.top{
  background:linear-gradient(90deg, rgba(28,4,8,.86), rgba(4,2,3,.86) 45%, rgba(22,3,7,.86)) !important;
  border-bottom:1px solid rgba(150,18,38,.35) !important;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
html body .nav a.section-link{color:var(--muted);letter-spacing:.06em}
html body .nav a.section-link:hover{color:#fff}

/* Buttons */
html body .button{
  background:var(--accent);border:1px solid var(--accent);color:var(--ink);
  font-weight:400 !important;letter-spacing:.06em;
  box-shadow:rgba(124,200,255,.55) 0 8px 24px -12px;
}
html body .button:hover{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--ink)}
html body .button.ghost{
  background:rgba(13,17,23,.85);border-color:var(--violet-line);color:#fff;box-shadow:none;
}
html body .button.ghost:hover{background:#1a212c;border-color:var(--violet-hi);color:#fff}

/* Cards — violet borders + glow, same as dashboard cards */
html body .card, html body .plan, html body .workspace-preview, html body .flow article, html body .cta{
  background:linear-gradient(#131922, #0d1117 140px) !important;
  border:1px solid var(--violet-line) !important;border-radius:14px;
  box-shadow:rgba(185,164,255,.06) 0 0 0 1px, rgba(0,0,0,.95) 0 18px 40px -24px;
  transition:border-color .2s, box-shadow .2s;
}
html body .flow article{padding:22px}
html body .card:hover, html body .plan:hover, html body .flow article:hover{
  border-color:var(--violet-hi) !important;
  box-shadow:rgba(185,164,255,.14) 0 0 0 1px, rgba(185,164,255,.35) 0 0 28px -10px, rgba(0,0,0,.95) 0 18px 40px -24px;
}
html body .plan.featured{
  border:1px solid var(--accent) !important;
  box-shadow:rgba(124,200,255,.25) 0 0 0 1px, rgba(124,200,255,.40) 0 24px 60px -30px;
}
html body .card ul, html body .card li{color:var(--muted)}
html body .card h3 + ul, html body .card li{border-color:var(--line)}

/* Preview panel */
html body .preview-head{border-bottom:1px solid var(--line);color:var(--muted)}
html body .preview-row{border-top:1px solid var(--line)}
html body .preview-foot{border-top:1px solid var(--line);color:var(--text-faint)}

/* Tags */
html body .tag{
  display:inline-block;width:auto;max-width:max-content;
  background:var(--accent-dim);border:1px solid rgba(124,200,255,.35);
  border-radius:999px;padding:4px 10px;font-size:11px;
}

/* Footer */
html body footer{border-top:1px solid rgba(150,18,38,.30) !important}
html body footer, html body footer a{color:var(--text-faint)}
html body footer a:hover{color:#fff}