/* LexProc landing — dark product style matching the LexProc mark (glass cubes on charcoal, one
   blue cube). System fonts only: Google Fonts is unreachable from mainland China. */
:root {
	--bg: #0b0d10;
	--bg-2: #111418;
	--card: #14171c;
	--card-2: #1a1e24;
	--line: rgb(255 255 255 / 0.08);
	--line-2: rgb(255 255 255 / 0.14);
	--text: #eceef1;
	--text-2: #a3abb6;
	--text-3: #6d7682;
	--blue: #5aa9f0;
	--blue-2: #8cc4f7;
	--blue-soft: rgb(90 169 240 / 0.12);
	--red: #f0736a;
	--red-soft: rgb(240 115 106 / 0.12);
	--amber: #e8b04f;
	--amber-soft: rgb(232 176 79 / 0.12);
	--green: #5fc79a;
	--green-soft: rgb(95 199 154 / 0.12);
	--sans: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Segoe UI', system-ui, sans-serif;
	--mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
	--r: 12px;
	color-scheme: dark;
	font-family: var(--sans);
	color: var(--text);
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
}
* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; background: var(--bg); font-size: 16px; line-height: 1.7; overflow-x: hidden; overflow-wrap: anywhere; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 32px; }
.wrap.narrow { max-width: 820px; }

.glow { position: absolute; inset: 0 0 auto 0; height: 900px; pointer-events: none; z-index: 0;
	background: radial-gradient(60% 50% at 50% 0%, rgb(90 169 240 / 0.18), transparent 70%), radial-gradient(30% 30% at 80% 20%, rgb(140 120 240 / 0.08), transparent 70%); }
main, .top, .foot { position: relative; z-index: 1; }

/* ---------- Header ---------- */
.top { position: sticky; top: 0; z-index: 20; background: rgb(11 13 16 / 0.72); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--line); }
.top .wrap { height: 64px; display: flex; align-items: center; gap: 40px; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--text); white-space: nowrap; }
.brand img { border-radius: 7px; }
.brand b { font-weight: 600; letter-spacing: 0.02em; }
.top nav { display: flex; gap: 28px; font-size: 14px; color: var(--text-2); }
.top nav a:hover { color: var(--text); }
.top .btn { margin-left: auto; }

.btn { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 22px; border: 0; border-radius: 10px; font: inherit; font-weight: 600; font-size: 15px; color: #06121f; cursor: pointer; white-space: nowrap;
	background: linear-gradient(180deg, #8cc4f7, #5aa9f0); box-shadow: 0 0 0 1px rgb(255 255 255 / 0.12) inset, 0 8px 24px -8px rgb(90 169 240 / 0.6); transition: filter 0.15s, transform 0.15s; }
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.6; cursor: default; }
.btn.sm { height: 34px; padding: 0 14px; font-size: 13px; border-radius: 8px; }

/* ---------- Hero ---------- */
.hero { padding: 88px 0 40px; text-align: center; }
.pill { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); padding: 6px 14px; border: 1px solid var(--line-2); border-radius: 999px; background: rgb(255 255 255 / 0.03); margin-bottom: 28px; }
.pill:hover { color: var(--text); border-color: rgb(255 255 255 / 0.24); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.hero h1 { font-size: 60px; line-height: 1.15; text-wrap: balance; letter-spacing: -0.02em; margin-bottom: 24px;
	background: linear-gradient(180deg, #fff 30%, #b9c2cd); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grad { background: linear-gradient(90deg, #8cc4f7, #5aa9f0 45%, #a99cf5); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { font-size: 18px; color: var(--text-2); max-width: 640px; margin: 0 auto 40px; }

.actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.btn.ghost { color: var(--text); background: rgb(255 255 255 / 0.04); box-shadow: 0 0 0 1px var(--line-2) inset; }
.btn.ghost:hover { background: rgb(255 255 255 / 0.08); filter: none; }
.form-note { margin-top: 18px; font-size: 13px; color: var(--text-3); }

/* Product shot: the report rendered as an app window. */
.shot { position: relative; margin: 80px auto 0; max-width: 1040px; text-align: left; border-radius: 16px; padding: 1px;
	background: linear-gradient(180deg, rgb(140 196 247 / 0.5), rgb(255 255 255 / 0.06) 40%, rgb(255 255 255 / 0.04)); box-shadow: 0 40px 120px -40px rgb(90 169 240 / 0.45), 0 30px 60px -30px rgb(0 0 0 / 0.8); }
.shot > * { background: var(--bg-2); }
.bar { display: flex; align-items: center; gap: 7px; height: 42px; padding: 0 16px; border-radius: 15px 15px 0 0; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--text-3); }
.bar i { width: 10px; height: 10px; border-radius: 50%; background: #2a2f37; }
.bar span { margin-left: 12px; font-family: var(--mono); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shot-body { padding: 24px; border-radius: 0 0 15px 15px; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.kpis div { padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.kpis b { display: block; font-size: 26px; font-weight: 600; line-height: 1.2; }
.kpis span { font-size: 12px; color: var(--text-3); }
.kpis .bad b { color: var(--red); }
.kpis .warn b { color: var(--amber); }
.shot .grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; }
.shot table { width: 100%; border-collapse: collapse; font-size: 13px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--card); }
.shot th { text-align: left; font-weight: 500; font-size: 11px; color: var(--text-3); padding: 10px 12px; border-bottom: 1px solid var(--line); }
.shot td { padding: 10px 12px; border-top: 1px solid var(--line); white-space: nowrap; color: var(--text-2); }
.shot tr.hit td { background: rgb(240 115 106 / 0.06); }
.flag { display: inline-block; width: 26px; font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.redact { display: inline-block; width: 64px; height: 9px; border-radius: 2px; background: linear-gradient(90deg, #3a414b, #2a3038); vertical-align: middle; }
.st.ok { color: var(--green); }
.st.pend { color: var(--amber); }
.who { font-size: 11px; padding: 2px 8px; border-radius: 999px; }
.who.ours { background: var(--green-soft); color: var(--green); }
.who.aff { background: var(--amber-soft); color: var(--amber); }
.who.third { background: var(--red-soft); color: var(--red); }
.findings { display: flex; flex-direction: column; gap: 10px; }
.findings li { font-size: 13px; line-height: 1.6; color: var(--text-2); padding: 12px 14px; border: 1px solid var(--line); border-left: 2px solid; border-radius: 8px; background: var(--card); }
.findings b { font-size: 11px; margin-right: 8px; padding: 1px 6px; border-radius: 4px; }
.findings .high { border-left-color: var(--red); }
.findings .high b { color: var(--red); background: var(--red-soft); }
.findings .mid { border-left-color: var(--amber); }
.findings .mid b { color: var(--amber); background: var(--amber-soft); }
.shot-cap { margin-top: 20px; font-size: 13px; color: var(--text-3); }
.shot-cap a { color: var(--blue-2); margin-left: 8px; }
.shot-cap a:hover { color: #fff; }

/* ---------- Sources strip ---------- */
.sources { padding: 64px 0 24px; text-align: center; }
.sources p { font-size: 13px; color: var(--text-3); margin-bottom: 18px; }
.logos { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 48px; font-family: var(--mono); font-size: 17px; font-weight: 600; letter-spacing: 0.08em; color: #59626e; }

/* ---------- Sections ---------- */
.block { padding: 112px 0 0; }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; color: var(--blue); margin-bottom: 14px; }
.block h2, .cta h2 { font-size: 40px; line-height: 1.25; letter-spacing: -0.02em; max-width: 820px; text-wrap: balance; }
.sub { margin-top: 14px; color: var(--text-2); max-width: 640px; }
.card { position: relative; border: 1px solid var(--line); border-radius: var(--r); background: linear-gradient(180deg, var(--card-2), var(--card)); padding: 28px; overflow: hidden; }
.card h3 { font-size: 19px; margin-bottom: 8px; }
.card p { color: var(--text-2); font-size: 15px; }

.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.bento .wide { grid-column: span 2; }
.viz { margin-top: 24px; }
.viz.map { display: flex; flex-wrap: wrap; gap: 8px; }
.viz.map span, .viz.holders span { font-size: 13px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line); }
.viz.map .ok { color: var(--green); background: var(--green-soft); border-color: transparent; }
.viz.map .bad { color: var(--red); background: var(--red-soft); border-color: transparent; }
.viz.date { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 16px; border: 1px dashed var(--line-2); border-radius: 10px; font-size: 13px; color: var(--text-3); }
.viz.date b { font-family: var(--mono); font-size: 20px; color: var(--blue-2); }
.viz.holders { display: flex; flex-wrap: wrap; gap: 8px; }
.viz.holders span { color: var(--amber); background: var(--amber-soft); border-color: transparent; }
.track { position: relative; height: 8px; border-radius: 999px; background: #232831; }
.track i, .track em { position: absolute; top: 0; height: 100%; border-radius: 999px; }
.track i { background: linear-gradient(90deg, #2d4f73, var(--blue)); }
.track em { background: var(--amber); box-shadow: 0 0 16px rgb(232 176 79 / 0.6); }
.ticks { position: relative; height: 18px; margin-top: 10px; font-size: 12px; color: var(--text-3); }
.ticks span { position: absolute; top: 0; white-space: nowrap; }
.ticks span:nth-child(2) { left: 50%; transform: translateX(-50%); }
.ticks span:nth-child(3) { left: 60%; transform: translateX(-10%); color: var(--amber); }
.ticks span:nth-child(4) { right: 0; }

.case { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; margin-top: 48px; align-items: start; }
.timeline { position: relative; }
.timeline::before { content: ''; position: absolute; left: 5px; top: 10px; bottom: 10px; width: 1px; background: linear-gradient(180deg, var(--line-2), transparent); }
.timeline li { position: relative; padding: 0 0 30px 36px; }
.timeline li::before { content: ''; position: absolute; left: 0; top: 7px; width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 2px solid #3a414b; }
.timeline time { display: block; font-family: var(--mono); font-size: 14px; color: var(--text); margin-bottom: 2px; }
.timeline p { color: var(--text-2); font-size: 15px; }
.timeline .alert::before { background: var(--red); border-color: var(--red); box-shadow: 0 0 0 5px var(--red-soft), 0 0 20px rgb(240 115 106 / 0.6); }
.timeline .alert time { color: var(--red); }
.timeline .alert p { color: var(--text); }
.timeline .next::before { border-color: var(--amber); border-style: dashed; }
.timeline .next time { color: var(--amber); }
.advice { border-color: rgb(90 169 240 / 0.3); }
.advice::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, var(--blue), transparent); }
.advice h3 { margin-bottom: 16px; }
.advice ol { counter-reset: a; }
.advice li { counter-increment: a; position: relative; padding: 12px 0 12px 36px; border-top: 1px solid var(--line); font-size: 15px; color: var(--text-2); }
.advice li::before { content: counter(a); position: absolute; left: 0; top: 13px; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-family: var(--mono); font-size: 12px; color: var(--blue-2); background: var(--blue-soft); }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; counter-reset: s; }
.steps li { counter-increment: s; padding: 28px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.steps li::before { content: '0' counter(s); display: block; font-family: var(--mono); font-size: 13px; color: var(--blue); margin-bottom: 20px; }
.steps b { display: block; font-size: 18px; font-weight: 600; margin-bottom: 6px; }
.steps p { color: var(--text-2); font-size: 15px; }
.more { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 24px; font-size: 14px; color: var(--text-3); }
.more b { font-weight: 500; color: var(--text-2); padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; }
.more em { font-style: normal; font-size: 11px; color: var(--blue); margin-left: 6px; }

.faq { margin-top: 40px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; position: relative; padding: 22px 40px 22px 0; font-size: 17px; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; position: absolute; right: 6px; top: 30px; width: 8px; height: 8px; border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3); transform: rotate(45deg); transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(-135deg); top: 34px; }
.faq details p { padding: 0 40px 24px 0; color: var(--text-2); font-size: 15px; }

.cta { margin-top: 120px; padding: 96px 0 104px; text-align: center; border-top: 1px solid var(--line); background: radial-gradient(50% 80% at 50% 100%, rgb(90 169 240 / 0.14), transparent 70%); }
.cta h2 { margin: 0 auto 14px; }
.cta-sub { color: var(--text-2); }
.mailbox { display: inline-flex; align-items: stretch; margin-top: 32px; border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; background: rgb(255 255 255 / 0.04); max-width: 100%; }
.mail { font-size: 22px; font-family: var(--mono); color: var(--text); padding: 14px 26px; }
.mail:hover { color: var(--blue-2); }
.copy { font: inherit; font-size: 14px; font-weight: 600; color: #06121f; background: linear-gradient(180deg, #8cc4f7, #5aa9f0); border: 0; padding: 0 22px; cursor: pointer; white-space: nowrap; }

.foot { border-top: 1px solid var(--line); padding: 24px 0; font-size: 12px; color: var(--text-3); }
.foot .wrap { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.brand.small { gap: 8px; font-size: 12px; color: var(--text-3); }
.brand.small img { border-radius: 5px; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
	.top nav { display: none; }
	.hero h1 { font-size: 46px; }
	.shot .grid, .case { grid-template-columns: 1fr; }
	.bento { grid-template-columns: 1fr 1fr; }
	.bento .wide { grid-column: span 2; }
	.steps { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	body { font-size: 15px; }
	.wrap { padding: 0 16px; }
	.top .wrap { height: 56px; }
	.hero { padding: 48px 0 24px; }
	.pill { font-size: 12px; margin-bottom: 22px; }
	.hero h1 { font-size: 34px; }
	.lede { font-size: 16px; margin-bottom: 28px; }
	.actions .btn { flex: 1 1 140px; }
	.mailbox { flex-direction: column; width: 100%; }
	.mail { font-size: 18px; padding: 14px 12px; }
	.copy { padding: 12px; }
	.shot { margin-top: 48px; }
	.shot-body { padding: 14px; }
	.kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
	.kpis div { padding: 10px 12px; }
	.kpis b { font-size: 22px; }
	.shot td, .shot th { padding: 9px 8px; }
	.redact { width: 44px; }
	.flag { display: none; }
	.logos { gap: 10px 24px; font-size: 14px; }
	.block { padding-top: 80px; }
	.block h2, .cta h2 { font-size: 28px; }
	.bento { grid-template-columns: 1fr; }
	.bento .wide { grid-column: auto; }
	.card { padding: 22px; }
	.cta { margin-top: 88px; padding: 72px 0 80px; }
}