.landing-page { --lp-ink:#102033; --lp-muted:#62748a; --lp-line:#e3eaf1; --lp-blue:#0879bf; color:var(--lp-ink); padding:0 0 1.5rem; }
.landing-nav { min-height:4.5rem; display:flex; align-items:center; gap:2rem; border-bottom:1px solid var(--lp-line); }
.landing-brand { display:flex; align-items:center; gap:.7rem; min-width:0; margin-right:auto; text-decoration:none; }
.landing-brand-mark { display:flex; align-items:center; justify-content:center; width:2.6rem; height:2.6rem; flex:none; overflow:hidden; border-radius:.75rem; color:white; background:linear-gradient(145deg,#38bdf8,#0369a1); font-size:1.15rem; font-weight:850; box-shadow:0 6px 16px #0369a128; }
.landing-brand-mark img { display:block; width:100%; height:100%; object-fit:cover; }
.landing-brand-copy { display:flex; min-width:0; flex-direction:column; line-height:1.15; }
.landing-brand-copy strong { overflow:hidden; color:var(--lp-ink); font-size:1rem; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.landing-brand-copy small { overflow:hidden; margin-top:.25rem; color:var(--lp-muted); font-size:.68rem; text-overflow:ellipsis; white-space:nowrap; }
.landing-nav-links,.landing-nav-actions { display:flex; align-items:center; gap:1.5rem; }
.landing-nav-links a,.landing-signin { color:var(--lp-muted); font-size:.82rem; font-weight:650; text-decoration:none; }
.landing-nav-links a:hover,.landing-signin:hover { color:var(--lp-blue); }
.landing-nav-cta { display:inline-flex; align-items:center; gap:.45rem; padding:.65rem 1rem; border-radius:.7rem; background:#0b78b9; color:white; font-size:.8rem; font-weight:750; text-decoration:none; box-shadow:0 7px 18px #0369a125; }
.landing-nav-cta:hover,.landing-primary:hover { background:#075f98; color:white; }
.landing-hero { display:grid; grid-template-columns:.92fr 1.08fr; align-items:center; gap:2rem; min-height:35rem; padding:3rem 0 3.5rem; }
.landing-hero-copy { position:relative; z-index:1; }
.landing-eyebrow { display:flex; align-items:center; gap:.5rem; color:#0879bf; font-size:.68rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.landing-eyebrow > span { width:.45rem; height:.45rem; border-radius:50%; background:#0ea5e9; box-shadow:0 0 0 4px #e0f2fe; }
.landing-hero h1 { margin:1.25rem 0 0; color:var(--lp-ink); font-size:clamp(2.65rem,5.3vw,4.3rem); font-weight:850; letter-spacing:-.065em; line-height:1.02; }
.landing-hero h1 em { color:#0879bf; font-style:normal; }
.landing-hero-copy > p { max-width:32rem; margin:1.35rem 0 0; color:var(--lp-muted); font-size:1rem; line-height:1.8; }
.landing-hero-actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.8rem; }
.landing-primary,.landing-secondary { display:inline-flex; min-height:3rem; align-items:center; justify-content:center; gap:.6rem; padding:.75rem 1.15rem; border:1px solid transparent; border-radius:.75rem; font-size:.85rem; font-weight:750; text-decoration:none; transition:background .16s ease,transform .16s ease; }
.landing-primary { color:#fff; background:#0b78b9; box-shadow:0 10px 22px #0369a12b; }
.landing-secondary { color:var(--lp-ink); background:#fff; border-color:var(--lp-line); }
.landing-secondary:hover { background:#f8fafc; }
.landing-primary:hover,.landing-secondary:hover { transform:translateY(-1px); }
.landing-proofline { display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; margin-top:1.45rem; color:var(--lp-muted); font-size:.7rem; font-weight:600; }
.landing-proofline i { color:#0b9b70; }
.landing-proofline > span { width:3px; height:3px; margin:0 .3rem; border-radius:50%; background:#a5b4c4; }
.landing-preview-wrap { position:relative; padding:1rem .2rem 1.3rem 1rem; }
.landing-preview-glow { position:absolute; inset:4% -3% 0 12%; border-radius:2rem; background:radial-gradient(ellipse at 60% 45%,#6ac7f555,transparent 67%); filter:blur(13px); }
.landing-preview { position:relative; z-index:1; overflow:hidden; border:1px solid #d9e3ec; border-radius:1.15rem; background:#fff; box-shadow:0 25px 70px #18324b20,0 4px 12px #18324b0d; transform:perspective(1200px) rotateY(-4deg) rotateX(1deg); }
.preview-topbar { display:flex; height:3.2rem; align-items:center; justify-content:space-between; padding:0 1rem; border-bottom:1px solid #e9eef3; }
.preview-brand { display:flex; align-items:center; gap:.5rem; color:#172b42; font-size:.68rem; font-weight:800; }
.preview-brand b { display:flex; width:1.45rem; height:1.45rem; align-items:center; justify-content:center; border-radius:.4rem; background:#0b78b9; color:#fff; font-size:.65rem; }
.preview-avatar { display:flex; width:1.6rem; height:1.6rem; align-items:center; justify-content:center; border-radius:50%; background:#dff3ff; color:#0879bf; font-size:.65rem; font-weight:800; }
.preview-body { display:flex; min-height:21rem; background:#f8fafc; }
.preview-rail { display:flex; width:2.8rem; flex:none; flex-direction:column; align-items:center; gap:1.1rem; padding-top:1.2rem; border-right:1px solid #e9eef3; background:white; color:#9aabba; font-size:.85rem; }
.preview-rail .active { color:#0879bf; }
.preview-main { min-width:0; flex:1; padding:1.05rem; }
.preview-heading { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.preview-heading div { display:flex; flex-direction:column; gap:.2rem; }
.preview-heading small { color:#91a0af; font-size:.5rem; font-weight:800; letter-spacing:.08em; }
.preview-heading strong { color:#172b42; font-size:.9rem; }
.preview-heading > span { padding:.35rem .5rem; border:1px solid #e6edf3; border-radius:.45rem; background:#fff; color:#63768a; font-size:.52rem; }
.preview-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.55rem; margin-top:.85rem; }
.preview-metrics > div { position:relative; display:flex; min-width:0; flex-direction:column; gap:.35rem; padding:.6rem; border:1px solid #e8edf2; border-radius:.6rem; background:#fff; }
.preview-metrics small { color:#8594a4; font-size:.48rem; font-weight:650; }
.preview-metrics strong { overflow:hidden; color:#1d3044; font-size:clamp(.56rem,1vw,.76rem); text-overflow:ellipsis; white-space:nowrap; }
.preview-metrics i { position:absolute; top:.55rem; right:.5rem; color:#11a77b; font-size:.52rem; }
.preview-metrics > div:nth-child(2) i { color:#ef6c67; }
.preview-metrics > div:nth-child(3) i { color:#e1a12d; }
.preview-chart-card { margin-top:.65rem; padding:.7rem .75rem .55rem; border:1px solid #e8edf2; border-radius:.65rem; background:#fff; }
.preview-chart-title { display:flex; align-items:center; justify-content:space-between; }
.preview-chart-title strong { color:#293e53; font-size:.58rem; }
.preview-chart-title small { color:#94a3b2; font-size:.48rem; }
.preview-chart { display:flex; height:4.2rem; align-items:end; gap:.35rem; margin-top:.55rem; padding:0 .2rem; border-bottom:1px solid #edf1f5; background:repeating-linear-gradient(to bottom,transparent 0,transparent 1.35rem,#f0f3f6 1.4rem); }
.preview-chart div { flex:1; border-radius:.2rem .2rem 0 0; background:linear-gradient(180deg,#38bdf8,#0b78b9); opacity:.84; }
.preview-chart div:nth-child(3n) { background:linear-gradient(180deg,#67d7b2,#0b9b70); }
.preview-chart-days { display:flex; justify-content:space-between; margin-top:.3rem; color:#a1adba; font-size:.43rem; }
.preview-activity { margin-top:.7rem; padding:.7rem .75rem .25rem; border:1px solid #e8edf2; border-radius:.65rem; background:#fff; }
.preview-activity > strong { color:#293e53; font-size:.58rem; }
.preview-activity > div { display:flex; align-items:center; gap:.45rem; padding:.45rem 0; border-top:1px solid #f0f3f6; }
.preview-activity > div > i { display:flex; width:1.25rem; height:1.25rem; align-items:center; justify-content:center; border-radius:.4rem; background:#e8faf3; color:#0b9b70; font-size:.62rem; }
.preview-activity > div:nth-of-type(2) > i { background:#fff0ef; color:#e46e68; }
.preview-activity span { display:flex; min-width:0; flex:1; flex-direction:column; gap:.1rem; }
.preview-activity b { overflow:hidden; color:#42566a; font-size:.52rem; text-overflow:ellipsis; white-space:nowrap; }
.preview-activity small { color:#9aa7b4; font-size:.45rem; }
.preview-activity em { color:#0a9a70; font-size:.52rem; font-style:normal; font-weight:750; white-space:nowrap; }
.preview-activity em.out { color:#e16d66; }
.preview-float { position:absolute; right:-.4rem; bottom:.2rem; z-index:2; display:flex; align-items:center; gap:.6rem; padding:.7rem .9rem; border:1px solid #e7eef3; border-radius:.8rem; background:#fff; box-shadow:0 12px 30px #19354c1b; }
.preview-float > i { color:#0b9b70; font-size:1.25rem; }
.preview-float span { display:flex; flex-direction:column; gap:.15rem; }
.preview-float b { color:#263c50; font-size:.65rem; }
.preview-float small { color:#8393a2; font-size:.55rem; }
.landing-value-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; padding:1.2rem 0; border-top:1px solid var(--lp-line); border-bottom:1px solid var(--lp-line); }
.landing-value-strip span { display:flex; align-items:center; justify-content:center; gap:.5rem; color:#53677b; font-size:.67rem; font-weight:650; text-align:center; }
.landing-value-strip i { color:#0879bf; font-size:.85rem; }
.landing-section { padding:5rem 0 4.5rem; }
.landing-section-heading { max-width:39rem; margin:0 auto 2rem; text-align:center; }
.landing-section-heading .landing-eyebrow { justify-content:center; }
.landing-section-heading h2,.landing-close h2 { margin:.7rem 0 0; color:var(--lp-ink); font-size:clamp(1.75rem,3vw,2.5rem); font-weight:820; letter-spacing:-.045em; line-height:1.15; }
.landing-section-heading p,.landing-close p { margin:.75rem auto 0; color:var(--lp-muted); font-size:.88rem; line-height:1.7; }
.landing-feature-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.8rem; }
.landing-feature { position:relative; min-height:12.5rem; overflow:hidden; padding:1.2rem; border:1px solid var(--lp-line); border-radius:.9rem; background:#fff; transition:transform .18s ease,box-shadow .18s ease; }
.landing-feature:hover { transform:translateY(-3px); box-shadow:0 15px 32px #122a3d12; }
.feature-icon { display:flex; width:2.3rem; height:2.3rem; align-items:center; justify-content:center; border-radius:.7rem; font-size:1rem; }
.feature-icon.blue { background:#e2f4ff;color:#0879bf; }.feature-icon.green { background:#e0f7ee;color:#09855f; }.feature-icon.amber { background:#fff5dc;color:#b77b0c; }.feature-icon.violet { background:#eeeaff;color:#6554bb; }
.landing-feature h3 { margin:1rem 0 0; color:#203449; font-size:.84rem; font-weight:780; }
.landing-feature p { margin:.45rem 0 0; color:var(--lp-muted); font-size:.7rem; line-height:1.65; }
.landing-feature > b { position:absolute; right:.9rem; bottom:.55rem; color:#e6edf3; font-size:1.35rem; font-weight:850; }
.landing-how { padding:3rem 1.5rem 3.5rem; border-radius:1.2rem; background:linear-gradient(135deg,#f0f8fc,#f6faff 60%,#edf7ff); }
.landing-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; max-width:55rem; margin:0 auto; }
.landing-steps article { display:flex; align-items:flex-start; gap:.85rem; }
.landing-steps article > span { display:flex; width:2rem; height:2rem; flex:none; align-items:center; justify-content:center; border:1px solid #b9dff4; border-radius:50%; background:white; color:#0879bf; font-size:.8rem; font-weight:800; box-shadow:0 0 0 5px #e1f2fc; }
.landing-steps h3 { margin:.1rem 0 0; color:#203449; font-size:.82rem; font-weight:780; }
.landing-steps p { margin:.4rem 0 0; color:var(--lp-muted); font-size:.7rem; line-height:1.6; }
.landing-close { display:flex; align-items:center; justify-content:space-between; gap:2rem; margin-top:3rem; padding:2rem 2.2rem; border-radius:1rem; background:linear-gradient(115deg,#0c2940,#0b5d91 72%,#0879bf); }
.landing-close .landing-eyebrow { color:#a5e0ff; }
.landing-close h2 { max-width:34rem; color:white; font-size:1.65rem; }
.landing-close p { margin:.55rem 0 0; color:#d2e4f0; }
.landing-close > a { display:inline-flex; flex:none; align-items:center; gap:.6rem; padding:.8rem 1.15rem; border-radius:.7rem; background:#fff; color:#075f98; font-size:.8rem; font-weight:800; text-decoration:none; }
.landing-footer { display:flex; justify-content:space-between; gap:1rem; padding:1.5rem .2rem .4rem; color:#8493a2; font-size:.65rem; }
.landing-footer a { color:#53718b; font-weight:700; text-decoration:none; }
html.dark .landing-page { --lp-ink:#edf5fb; --lp-muted:#9cabb9; --lp-line:#26394a; }
html.dark .landing-brand-copy strong,html.dark .landing-hero h1,html.dark .landing-section-heading h2 { color:var(--lp-ink); }
html.dark .landing-brand-copy small,html.dark .landing-brand-copy .brand-tagline { color:#9cabb9; }
html.dark .landing-nav-links a,html.dark .landing-signin { color:#a5b4c2; }
html.dark .landing-secondary,html.dark .landing-feature { border-color:#26394a; background:#111f2c; color:#e7f0f7; }
html.dark .landing-feature h3,html.dark .landing-steps h3 { color:#e2edf5; }
html.dark .landing-how { background:linear-gradient(135deg,#132636,#172b3d); }
html.dark .landing-steps article > span { border-color:#31516a; background:#152b3d; }
html.dark .landing-value-strip span { color:#b3c0cb; }
@media(max-width:800px) { .landing-hero { grid-template-columns:1fr; gap:1.4rem; min-height:0; padding:3rem 0; } .landing-hero-copy { max-width:40rem; } .landing-preview-wrap { max-width:38rem; width:100%; margin:0 auto; } .landing-feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .landing-value-strip { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:540px) { .landing-nav { gap:.8rem; } .landing-nav-links { display:none; } .landing-nav-actions { gap:.8rem; } .landing-nav-cta { padding:.6rem .7rem; font-size:.72rem; } .landing-hero { padding:2.5rem 0 2.2rem; } .landing-hero h1 { font-size:2.65rem; } .landing-hero-copy > p { font-size:.9rem; } .landing-proofline { font-size:.62rem; } .landing-preview-wrap { padding:.3rem 0 1rem; } .landing-preview { transform:none; } .preview-main { padding:.7rem; } .preview-body { min-height:18.8rem; } .preview-rail { width:2.1rem; } .preview-metrics { gap:.3rem; } .preview-metrics > div { padding:.45rem; } .preview-chart { height:3.7rem; } .preview-float { right:-.2rem; bottom:0; padding:.55rem .7rem; } .landing-section { padding:3.5rem 0; } .landing-section-heading { margin-bottom:1.5rem; } .landing-feature-grid { gap:.55rem; } .landing-feature { min-height:13rem; padding:.85rem; } .landing-feature h3 { font-size:.77rem; } .landing-feature p { font-size:.66rem; } .landing-how { padding:2.5rem 1rem; } .landing-steps { grid-template-columns:1fr; gap:1.2rem; } .landing-close { align-items:flex-start; flex-direction:column; gap:1.2rem; margin-top:2rem; padding:1.5rem; } .landing-close h2 { font-size:1.4rem; } .landing-footer { flex-wrap:wrap; } }