:root { --bg:#0b0e18; --surface:#121725; --surface-2:#181f31; --text:#f6f7fb; --muted:#aab1c2; --line:rgba(255,255,255,.12); --lime:#d8ff63; --blue:#6577ff; --violet:#a87cff; --dark:#10141f; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; overflow-x:clip; color:var(--text); background:var(--bg); font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif; line-height:1.65; }
a { color:inherit; }
.skip-link { position:fixed; z-index:100; left:8px; top:8px; padding:10px 16px; color:var(--dark); background:var(--lime); transform:translateY(-150%); }
.skip-link:focus { transform:translateY(0); }
.site-header { position:relative; z-index:5; width:min(1200px,calc(100% - 40px)); min-height:78px; margin:auto; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.logo { display:flex; align-items:center; gap:10px; text-decoration:none; font-size:19px; font-weight:800; letter-spacing:-.03em; }
.logo svg { width:34px; height:34px; color:var(--lime); }
nav { display:flex; align-items:center; gap:28px; }
nav a { min-height:44px; display:inline-flex; align-items:center; color:var(--muted); text-decoration:none; font-size:14px; font-weight:650; }
.nav-cta { padding:0 18px; border:1px solid var(--line); border-radius:99px; color:var(--text); background:rgba(255,255,255,.04); }
a:focus-visible { outline:3px solid var(--lime); outline-offset:4px; }
.hero { position:relative; min-height:780px; padding:100px max(20px,calc((100% - 1200px)/2)); display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:70px; overflow:hidden; }
.hero>*:not(.glow) { position:relative; z-index:2; }
.glow { position:absolute; border-radius:50%; filter:blur(100px); opacity:.2; }
.glow-one { width:480px; height:480px; right:-100px; top:0; background:var(--blue); }
.glow-two { width:300px; height:300px; left:5%; bottom:-100px; background:var(--violet); }
.eyebrow { margin:0 0 18px; color:var(--lime); font-size:11px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
.eyebrow span { display:inline-block; width:7px; height:7px; margin-right:8px; border-radius:50%; background:var(--lime); box-shadow:0 0 14px var(--lime); }
h1,h2,h3 { margin-top:0; letter-spacing:-.045em; line-height:1.08; }
h1 { margin-bottom:28px; font-size:clamp(52px,6vw,82px); }
h1 em { color:var(--lime); font-style:normal; }
.hero-copy>p:not(.eyebrow) { max-width:590px; color:var(--muted); font-size:18px; }
.hero-actions { margin-top:32px; display:flex; gap:12px; flex-wrap:wrap; }
.button { min-height:48px; padding:0 22px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:10px; text-decoration:none; font-weight:750; transition:background .2s ease,color .2s ease,border-color .2s ease; }
.button-primary { border-color:var(--lime); background:var(--lime); color:var(--dark); }
.button-primary:hover { background:white; border-color:white; }
.button-ghost:hover { background:rgba(255,255,255,.08); }
.trust-list { margin:28px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:18px; list-style:none; color:var(--muted); font-size:12px; }
.trust-list span { color:var(--lime); }
.dashboard { overflow:hidden; border:1px solid rgba(255,255,255,.17); border-radius:18px; background:rgba(18,23,37,.92); box-shadow:0 40px 100px rgba(0,0,0,.45); transform:perspective(1200px) rotateY(-5deg) rotateX(2deg); }
.dash-top { min-height:72px; padding:14px 18px; display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--line); }
.dash-logo { width:36px; height:36px; display:grid; place-items:center; border-radius:9px; background:var(--lime); color:var(--dark); font-weight:900; }
.dash-top div { display:flex; flex-direction:column; }
.dash-top small { color:var(--muted); font-size:10px; }
.dash-top i { margin-left:auto; padding:6px 9px; border-radius:99px; background:rgba(216,255,99,.1); color:var(--lime); font-size:10px; font-style:normal; }
.dash-body { display:grid; grid-template-columns:54px 1fr; }
.side { padding:18px 12px; display:flex; flex-direction:column; gap:14px; border-right:1px solid var(--line); }
.side span { width:28px; height:28px; border-radius:8px; background:rgba(255,255,255,.06); }
.side .active { background:var(--blue); }
.flow-area { min-width:0; padding:18px; }
.metric-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.metric-row>div { padding:13px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.025); }
.metric-row small,.metric-row b { display:block; }
.metric-row small { color:var(--muted); font-size:9px; }
.metric-row b { margin-top:4px; font-size:20px; }
.flow-line { margin:18px 0; padding:18px 8px; display:flex; align-items:center; justify-content:space-between; gap:7px; border-radius:12px; background:#0e1320; }
.flow-line article { min-width:0; padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); }
.flow-line article span,.flow-line article b,.flow-line article small { display:block; }
.flow-line article span { color:var(--blue); font-size:9px; }
.flow-line article b { margin:5px 0; font-size:11px; }
.flow-line article small { color:var(--muted); font-size:8px; }
.flow-line>i { color:var(--muted); font-style:normal; }
.flow-line .highlight { border-color:rgba(216,255,99,.5); }
.flow-line .highlight span { color:var(--lime); }
.activity p { margin:0; min-height:38px; display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--line); color:#dfe3ed; font-size:10px; }
.activity p>span { width:7px; height:7px; border-radius:50%; background:var(--blue); }
.activity small { margin-left:auto; color:var(--muted); }
.problem { padding:112px max(20px,calc((100% - 1200px)/2)); display:grid; grid-template-columns:.9fr 1.1fr; gap:90px; background:#f3f5f7; color:var(--dark); }
.problem h2,.section-heading h2,.pricing h2 { margin:0; font-size:clamp(42px,5vw,68px); }
.problem .eyebrow,.features .eyebrow,.pricing .eyebrow { color:#5061e6; }
.problem-list { border-top:1px solid rgba(16,20,31,.18); }
.problem-list article { padding:24px 0; display:grid; grid-template-columns:50px 160px 1fr; gap:14px; border-bottom:1px solid rgba(16,20,31,.18); }
.problem-list span { color:#5061e6; font-size:11px; font-weight:800; }
.problem-list h3,.problem-list p { margin:0; }
.problem-list h3 { font-size:20px; }
.problem-list p { color:#667080; }
.features { padding:112px max(20px,calc((100% - 1200px)/2)); }
.section-heading { max-width:900px; margin-bottom:50px; }
.section-heading>p:last-child { color:var(--muted); font-size:18px; }
.feature-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.feature-card { position:relative; min-height:340px; padding:32px; overflow:hidden; border:1px solid var(--line); border-radius:18px; background:var(--surface); }
.feature-card.large { grid-column:1/-1; min-height:440px; display:grid; grid-template-columns:.8fr 1.2fr; align-items:center; gap:70px; }
.feature-no { color:var(--lime); font-size:11px; font-weight:800; }
.feature-card h3 { margin:20px 0 12px; font-size:clamp(28px,3vw,40px); }
.feature-card p { color:var(--muted); }
.log-ui { padding:16px; border:1px solid var(--line); border-radius:14px; background:#0d111c; }
.log-ui p { min-height:68px; margin:0; padding:10px; display:grid; grid-template-columns:22px 1fr auto; align-items:center; gap:10px; border-bottom:1px solid var(--line); }
.log-ui p:last-child { border-bottom:0; }
.log-ui i { width:14px; height:14px; border:2px solid var(--muted); border-radius:50%; }
.log-ui i.done { border-color:var(--lime); background:var(--lime); box-shadow:inset 0 0 0 3px #0d111c; }
.log-ui b,.log-ui small { display:block; }
.log-ui small { color:var(--muted); }
.log-ui em { color:var(--lime); font-size:10px; font-style:normal; }
.approval-ui { position:absolute; left:32px; right:32px; bottom:32px; min-height:70px; padding:14px; display:flex; align-items:center; justify-content:space-between; border:1px solid var(--line); border-radius:12px; background:#0d111c; }
.approval-ui div { display:flex; gap:8px; }
.approval-ui i { width:44px; height:32px; border-radius:8px; background:var(--blue); }
.approval-ui i:last-child { background:var(--lime); }
.feature-card.accent { background:var(--lime); color:var(--dark); }
.feature-card.accent .feature-no,.feature-card.accent p { color:#33401f; }
.big-number { position:absolute; right:28px; bottom:14px; font-size:112px; line-height:1; letter-spacing:-.08em; }
.big-number small { font-size:22px; letter-spacing:0; }
.workflow { padding:112px max(20px,calc((100% - 1200px)/2)); background:var(--surface); }
.workflow ol { margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); list-style:none; border-top:1px solid var(--line); }
.workflow li { min-height:250px; padding:24px; border-right:1px solid var(--line); }
.workflow li:last-child { border-right:0; }
.workflow li>span { color:var(--lime); font-size:11px; font-weight:800; }
.workflow h3 { margin:60px 0 12px; font-size:24px; }
.workflow li p { color:var(--muted); }
.pricing { padding:112px max(20px,calc((100% - 1200px)/2)); display:grid; grid-template-columns:1fr .8fr; gap:90px; background:var(--lime); color:var(--dark); }
.pricing>div>p:not(.eyebrow) { max-width:630px; color:#465130; }
.price-card { padding:32px; border:1px solid rgba(16,20,31,.22); border-radius:18px; background:rgba(255,255,255,.38); }
.price-card>span { font-size:13px; font-weight:750; }
.price-card>b { display:block; margin:20px 0; font-size:46px; letter-spacing:-.05em; }
.price-card>b small { font-size:15px; }
.price-card ul { padding:20px 0 20px 20px; border-top:1px solid rgba(16,20,31,.18); }
.price-card li { margin:8px 0; }
.button-dark { width:100%; background:var(--dark); color:white; }
.button-dark:hover { background:var(--blue); border-color:var(--blue); }
footer { min-height:82px; padding:18px max(20px,calc((100% - 1200px)/2)); display:flex; align-items:center; justify-content:space-between; gap:24px; color:var(--muted); font-size:13px; }
footer a { min-height:44px; display:inline-flex; align-items:center; text-underline-offset:5px; }
.reveal-ready [data-reveal] { opacity:0; transform:translateY(18px); transition:opacity .45s ease-out,transform .45s ease-out; }
.reveal-ready [data-reveal].is-visible { opacity:1; transform:translateY(0); }
@media(max-width:930px){ nav>a:not(.nav-cta){display:none}.hero,.problem,.pricing{grid-template-columns:1fr}.dashboard{transform:none}.feature-card.large{grid-template-columns:1fr}.workflow ol{grid-template-columns:1fr 1fr}.problem-list article{grid-template-columns:40px 140px 1fr} }
@media(max-width:600px){ .site-header{min-height:70px}.nav-cta{padding:0 13px}.hero{min-height:auto;padding-top:68px;padding-bottom:76px}.dashboard{margin-top:20px}.dash-body{grid-template-columns:1fr}.side{display:none}.metric-row{gap:6px}.metric-row>div{padding:9px}.flow-line>i{display:none}.flow-line{align-items:stretch}.flow-line article{padding:8px}.problem,.features,.workflow,.pricing{padding-top:80px;padding-bottom:80px}.problem-list article{grid-template-columns:38px 1fr}.problem-list article p{grid-column:2}.feature-grid{grid-template-columns:1fr}.feature-card.large{grid-column:auto;gap:28px}.feature-card{min-height:360px;padding:24px}.approval-ui{left:24px;right:24px;bottom:24px}.workflow ol{grid-template-columns:1fr}.workflow li{min-height:190px;border-right:0;border-bottom:1px solid var(--line)}.workflow h3{margin-top:38px}footer{flex-direction:column;align-items:flex-start} }
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}.dashboard{transform:none} }