:root { color-scheme: dark; --bg:#171717; --panel:#202020; --line:#333333; --muted:#9a9a9a; --text:#f4f4f5; --green:#10b981; --green-soft:#a7f3d0; --purple:#8b5cf6; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--text); background:var(--bg); font-family:"Microsoft YaHei UI","PingFang SC",system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
.site-header, footer { width:min(1180px, calc(100% - 48px)); margin:auto; display:flex; align-items:center; justify-content:space-between; }
.site-header { min-height:88px; border-bottom:1px solid rgba(255,255,255,.08); }
.brand { display:inline-flex; align-items:center; gap:10px; font-size:19px; font-weight:750; letter-spacing:-.04em; }
.brand-mark { width:29px; height:29px; padding:4px; display:grid; grid-template-columns:repeat(3,1fr); gap:3px; border-radius:8px; background:#2a2d31; transform:skewY(-1deg); }
.brand-mark i { display:block; background:#f4f4f5; } .brand-mark i:nth-child(4) { grid-column:1 / span 2; } .brand-mark i:nth-child(5) { grid-column:1; }
nav { display:flex; align-items:center; gap:24px; font-size:14px; color:#b6b6b8; } nav a:hover, nav a[aria-current="page"] { color:var(--text); }
.hero { position:relative; overflow:hidden; min-height:680px; padding:108px max(24px, calc((100vw - 1180px) / 2)) 80px; background:radial-gradient(circle at 77% 35%, rgba(16,185,129,.16), transparent 22%), radial-gradient(circle at 55% 92%, rgba(139,92,246,.1), transparent 27%); }
.eyebrow,.kicker { margin:0; color:var(--green-soft); font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; } .eyebrow { display:flex; align-items:center; gap:8px; } .eyebrow span { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 16px var(--green); }
.hero h1 { position:relative; z-index:1; margin:22px 0 22px; max-width:730px; font-size:clamp(47px, 6.4vw, 84px); line-height:1.08; letter-spacing:-.065em; } .hero h1 em { color:var(--green); font-style:normal; }
.hero-copy { position:relative; z-index:1; width:min(485px,100%); margin:0; color:#b6b6b8; font-size:17px; line-height:1.85; }
.hero-actions { position:relative; z-index:1; display:flex; gap:12px; margin-top:34px; }.button { display:inline-flex; align-items:center; justify-content:center; gap:18px; min-height:46px; padding:0 20px; border-radius:10px; font-size:14px; font-weight:700; transition:transform .2s,background .2s; }.button:hover { transform:translateY(-2px); }.button-primary { color:#062b20; background:var(--green); }.button-primary b { font-size:18px; }.button-secondary { border:1px solid #454545; color:#dedede; background:#222; }
.hero-art { position:absolute; top:112px; left:calc(50% + 90px); width:590px; height:490px; transform:rotate(-3deg); }.canvas-card,.board-card,.calendar-card { position:absolute; border:1px solid rgba(255,255,255,.1); box-shadow:0 28px 65px rgba(0,0,0,.35); backdrop-filter:blur(12px); }.canvas-card { inset:35px 64px 26px 0; padding:25px; overflow:hidden; border-radius:20px; background:linear-gradient(145deg,rgba(41,42,44,.96),rgba(22,23,24,.93)); }.canvas-card strong { font-size:19px; }.canvas-card p { margin:7px 0; color:#a3a3a3; font-size:12px; }.dot { display:inline-block; width:8px; height:8px; margin-right:8px; border-radius:50%; }.dot-emerald { background:var(--green); }.canvas-lines i { position:absolute; height:1px; background:linear-gradient(90deg,rgba(16,185,129,.55),transparent); transform-origin:left; }.canvas-lines i:nth-child(1){top:48%;left:15%;width:50%;transform:rotate(25deg)}.canvas-lines i:nth-child(2){top:65%;left:32%;width:39%;transform:rotate(-47deg)}.canvas-lines i:nth-child(3){top:72%;left:12%;width:34%;transform:rotate(-18deg)}.sticky { position:absolute; padding:12px; border-radius:8px; font-size:12px; box-shadow:0 10px 20px rgba(0,0,0,.2); }.sticky-one { right:54px; top:112px; color:#14372c; background:#8ee4c3; transform:rotate(5deg); }.sticky-two { left:104px; bottom:49px; color:#342b08; background:#f8d96f; transform:rotate(-8deg); }.board-card { z-index:2; right:0; top:0; width:250px; padding:16px; border-radius:14px; background:rgba(30,31,32,.96); }.board-card>div { display:flex; justify-content:space-between; color:#cfcfcf; font-size:13px; }.board-card b { color:var(--green); }.board-card ul { margin:16px 0 0; padding:0; list-style:none; }.board-card li { padding:10px 0; border-top:1px solid #353535; color:#d7d7d7; font-size:12px; }.board-card li i { display:inline-block; width:7px; height:7px; margin-right:8px; border:1px solid #6f6f6f; border-radius:2px; }.calendar-card { z-index:3; right:15px; bottom:0; width:226px; padding:15px; border-radius:14px; background:rgba(32,32,33,.98); }.calendar-head { display:flex; justify-content:space-between; align-items:center; color:#b7b7b8; font-size:12px; }.calendar-head b { padding:6px 8px; border-radius:7px; color:#062b20; background:var(--green); }.calendar-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin:13px 0; }.calendar-grid i { height:22px; border-radius:4px; background:#2e2e30; }.calendar-grid i:nth-child(2),.calendar-grid i:nth-child(6) { background:rgba(16,185,129,.22); }.calendar-event { padding:7px; overflow:hidden; border-left:3px solid var(--green); border-radius:5px; color:#dcfce7; background:rgba(16,185,129,.15); font-size:10px; white-space:nowrap; }
.feature-section { width:min(1180px, calc(100% - 48px)); margin:0 auto; padding:126px 0; }.section-intro { width:min(630px,100%); }.section-intro h2,.privacy-section h2,.closing h2 { margin:14px 0 18px; font-size:clamp(33px,4.3vw,54px); line-height:1.14; letter-spacing:-.055em; }.section-intro>p:last-child { color:var(--muted); line-height:1.8; font-size:16px; }.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; margin-top:52px; }.feature-card { min-height:355px; padding:26px; overflow:hidden; border:1px solid var(--line); border-radius:16px; background:#1d1d1e; position:relative; }.feature-index { color:#777; font-family:ui-monospace,monospace; font-size:12px; }.feature-card h3 { margin:45px 0 11px; font-size:22px; letter-spacing:-.04em; }.feature-card p { position:relative; z-index:1; max-width:280px; color:#a7a7a9; font-size:14px; line-height:1.75; }.mini-canvas,.mini-board,.mini-calendar { position:absolute; right:0; bottom:0; left:0; height:129px; border-top:1px solid rgba(255,255,255,.06); }.mini-canvas span { position:absolute; padding:8px; border-radius:6px; color:#b9f6dd; background:#175b45; font-size:11px; }.mini-canvas span:nth-child(1){left:32px;top:36px}.mini-canvas span:nth-child(2){right:54px;top:16px;color:#e5d4ff;background:#554074}.mini-canvas span:nth-child(3){right:28px;bottom:18px;color:#f7df9e;background:#655018}.mini-canvas i { position:absolute; width:100px; height:1px; background:#5c5c5c; transform-origin:left; }.mini-canvas i:nth-last-child(2){top:65px;left:82px;transform:rotate(-18deg)}.mini-canvas i:last-child{top:78px;left:82px;transform:rotate(21deg)}.mini-board { padding:18px 25px; display:grid; gap:7px; }.mini-board i { display:block; height:17px; border-radius:4px; background:#303032; }.mini-board i:nth-child(1){width:68%;background:#245645}.mini-board i:nth-child(2){width:86%;}.mini-board i:nth-child(3){width:54%;background:#473555}.mini-board i:nth-child(4){width:74%;}.mini-calendar { display:grid; grid-template-columns:repeat(6,1fr); align-content:center; gap:6px; padding:20px 28px; }.mini-calendar b { position:absolute; top:14px; right:20px; color:var(--green); font-size:12px; }.mini-calendar i { height:17px; border-radius:3px; background:#303032; }.mini-calendar i:nth-child(3),.mini-calendar i:nth-child(7){background:rgba(16,185,129,.45);}
.privacy-section { display:grid; grid-template-columns:1fr 1fr; gap:100px; padding:93px max(24px, calc((100vw - 1180px)/2)); background:#202020; }.privacy-copy { max-width:490px; color:#b3b3b5; font-size:16px; line-height:1.85; }.privacy-copy p:first-child { margin-top:0; }.text-link { display:inline-flex; gap:10px; margin-top:10px; color:var(--green-soft); font-weight:700; }.text-link span { color:var(--green); }.closing { width:min(780px, calc(100% - 48px)); padding:130px 0; text-align:center; }.closing h2 { font-size:clamp(45px,6vw,76px); }.closing .button { margin-top:15px; }.closing-mark { display:flex; justify-content:center; gap:5px; }.closing-mark span { width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 18px rgba(16,185,129,.7); }.closing-mark span:nth-child(2){opacity:.65}.closing-mark span:nth-child(3){opacity:.3}
footer { min-height:106px; padding:25px 0; border-top:1px solid rgba(255,255,255,.08); color:#8e8e91; font-size:13px; }.brand+ p { margin:0; }footer div { display:flex; gap:18px; } footer a:hover { color:#e5e5e5; }
.legal-content { width:min(760px, calc(100% - 48px)); padding:95px 0 124px; margin:auto; }.legal-content h1 { margin:13px 0 7px; font-size:clamp(43px,6vw,68px); letter-spacing:-.06em; }.updated { color:#777; font-size:13px; }.lead { margin:42px 0 52px; color:#c4c4c5; font-size:19px; line-height:1.8; }.legal-content section { padding:26px 0; border-top:1px solid var(--line); }.legal-content h2 { margin:0 0 12px; font-size:20px; letter-spacing:-.03em; }.legal-content section p { margin:0 0 10px; color:#b4b4b6; line-height:1.85; }.legal-content section a { color:var(--green-soft); text-decoration:underline; text-underline-offset:3px; }
@media (max-width:900px){.hero-art{position:relative;top:auto;left:auto;margin:70px auto 0;transform:scale(.8);transform-origin:top left;width:740px;height:395px}.hero{padding-top:85px}.feature-grid{grid-template-columns:1fr}.feature-card{min-height:290px}.privacy-section{grid-template-columns:1fr;gap:30px}.site-header,footer{width:min(100% - 32px,1180px)}.site-header nav{gap:13px;font-size:12px}.brand+ p{display:none}}
@media (max-width:560px){.site-header{min-height:68px}.site-header nav a:not(:last-child){display:none}.hero{min-height:0;padding-bottom:0}.hero-art{margin-top:54px;transform:scale(.58);width:590px;height:280px}.hero h1{font-size:45px}.hero-copy{font-size:15px}.feature-section{padding:78px 0}.privacy-section{padding:70px 24px}.legal-content{padding:66px 0 80px}.legal-content .lead{font-size:17px}.closing{padding:85px 0}footer{min-height:88px}footer div{gap:12px;font-size:12px}}