/* Flowing particle backgrounds and the public landing sections (logged-out home, prices, downloads). */
.flow-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
/* Once particles run, they carry the orange; the CSS glows stay as the no-WebGL fallback. */
.login-aside.flow-on{background:radial-gradient(58% 44% at 70% 104%,rgba(255,122,47,.42),rgba(255,150,90,.14) 45%,rgba(255,138,61,0) 74%),radial-gradient(34% 60% at 108% 38%,rgba(120,165,255,.45),rgba(120,165,255,0) 72%),linear-gradient(180deg,#fffdf9 0%,#fff6ee 55%,#ffeede 100%)}
.flow-top{position:absolute;top:0;left:0;right:0;bottom:auto;height:640px;z-index:0;-webkit-mask-image:linear-gradient(180deg,#000 40%,transparent 96%);mask-image:linear-gradient(180deg,#000 40%,transparent 96%)}
body.flow-on{background:radial-gradient(760px 380px at 4% -200px,rgba(110,160,255,.13),transparent 70%),radial-gradient(1000px 420px at 92% -160px,rgba(255,138,61,.07),transparent 70%),var(--bg);background-repeat:no-repeat}
body.flow-on>main,body.flow-on>footer{position:relative;z-index:1}

/* Logged-out home: the login hero keeps its layout; sections follow below it. */
.login-view{display:block}
.login-hero{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr)}
.intro-link{display:inline-flex;align-items:center;gap:10px;margin:0 0 20px;padding:9px 14px 9px 9px;border:1px solid var(--line);background:rgba(255,254,251,.72);backdrop-filter:blur(6px);font-size:.86rem;font-weight:550;color:var(--ink)}
.intro-link::before{content:"";width:26px;height:26px;background:#222 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7v10l8-5z' fill='%23fffefb'/%3E%3C/svg%3E") center/18px no-repeat}
.intro-link:hover{border-color:var(--ink)}
.scroll-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:2;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:8px}
.scroll-hint::after{content:"";width:1px;height:28px;background:linear-gradient(var(--line-strong),transparent)}
.login-hero{position:relative}

.landing{border-top:1px solid var(--line);background:var(--bg)}
.landing-inner{max-width:1240px;margin:0 auto;padding:88px 32px 40px}
.landing-block{margin-bottom:96px}
.landing-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:34px}
.landing-head h2{font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.25;letter-spacing:-.02em;margin:14px 0 0}
.landing-head p{max-width:420px;margin:0;color:var(--muted);line-height:1.85;font-size:.92rem}

.intro-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:center}
.intro-copy h2{font-size:clamp(1.8rem,3.2vw,2.6rem);line-height:1.22;letter-spacing:-.02em;margin:14px 0 18px}
.intro-copy>p{color:var(--ink-2);line-height:1.9;margin:0 0 22px}
.intro-points{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.intro-points li{display:flex;gap:12px;align-items:baseline;font-size:.9rem;color:var(--ink-2)}
.intro-points li::before{content:"";width:6px;height:6px;flex:none;background:var(--accent);transform:translateY(-2px)}
.intro-frame{position:relative;margin:0;padding:10px;border:1px solid var(--line);background:var(--surface);box-shadow:0 30px 80px -40px rgba(194,65,12,.35)}
.intro-frame::before{content:"";position:absolute;left:-1px;top:-1px;width:48px;height:2px;background:var(--accent)}
.intro-demo{padding:clamp(20px,4vw,40px);min-height:300px;background:linear-gradient(130deg,#fff8ef,#fff1e5);display:flex;flex-direction:column;justify-content:center}
.intro-demo h3{font-size:clamp(1.25rem,2.2vw,1.7rem);margin:14px 0}
.intro-demo>p:not(.eyebrow){line-height:1.8;color:var(--ink-2);font-size:.9rem}
.demo-route{display:flex;align-items:center;gap:18px;margin:20px 0;color:var(--accent-deep)}
.demo-route span{border:1px solid var(--line);padding:10px 16px;background:var(--surface)}
.demo-controls{display:flex;flex-wrap:wrap;gap:8px}
.demo-controls button{border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:8px 16px;cursor:pointer}
.demo-controls button[aria-pressed=true]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.demo-controls button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.intro-frame figcaption{display:flex;justify-content:space-between;gap:12px;padding:10px 4px 2px;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--muted)}

.steps{list-style:none;counter-reset:step;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:0;margin:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.steps li{counter-increment:step;position:relative;padding:30px 28px 32px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--surface)}
.steps li::before{content:counter(step,decimal-leading-zero);display:block;font-family:var(--mono);font-size:.74rem;color:var(--accent-deep);margin-bottom:22px}
.steps li::after{content:"";position:absolute;left:-5px;top:-5px;width:9px;height:9px;background:linear-gradient(rgba(20,17,15,.34),rgba(20,17,15,.34)) center/1px 9px no-repeat,linear-gradient(rgba(20,17,15,.34),rgba(20,17,15,.34)) center/9px 1px no-repeat}
.steps h3{font-size:1.12rem;margin:0 0 10px}
.steps p{margin:0;color:var(--muted);font-size:.86rem;line-height:1.85}
.steps code{font-size:.78rem}
.config-card{margin-top:18px;padding:14px 16px;background:#14110f;color:#ece6dc;font:.78rem/1.9 var(--mono);border-top:2px solid var(--accent);overflow-wrap:anywhere}
.config-card b{color:#ff9d5c;font-weight:500}

.features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
.features article{padding:30px 28px 34px 0;border-bottom:1px solid var(--line-soft)}
.features article:not(:nth-child(3n)){padding-right:40px}
.features article>span{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;color:var(--faint)}
.features h3{font-size:1.02rem;margin:12px 0 8px}
.features p{margin:0;color:var(--muted);font-size:.86rem;line-height:1.85}

.landing-cta{position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:center;gap:28px;padding:48px 44px;border:1px solid rgba(194,65,12,.22);background:var(--warm-glow)}
.landing-cta h2{font-size:clamp(1.5rem,2.6vw,2.1rem);margin:12px 0 0;line-height:1.3}
.landing-cta .actions{display:flex;flex-wrap:wrap;gap:10px;position:relative;z-index:1}
.landing-cta>div{position:relative;z-index:1}
.landing-footer{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);margin-top:56px;padding:22px 0 8px;font-family:var(--mono);font-size:.68rem;color:var(--faint);letter-spacing:.06em}

/* Sections rise in once, the first time they scroll into view. */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

@media(max-width:950px){.intro-grid{grid-template-columns:1fr;gap:28px}.steps,.features{grid-template-columns:1fr}.steps li{border-right:1px solid var(--line)}.features article,.features article:not(:nth-child(3n)){padding-right:0}.landing-head{flex-direction:column;align-items:flex-start}.landing-cta{flex-direction:column;align-items:flex-start;padding:34px 26px}}
@media(max-width:650px){.login-hero{display:block;min-height:0}.scroll-hint{display:none}.landing-inner{padding:56px 16px 28px}.landing-block{margin-bottom:64px}.flow-top{height:460px}.landing-footer{flex-direction:column}}
/* 13: 首屏先讲卖点，登录卡收窄到侧边 */
@media(min-width:651px){.login-hero{grid-template-columns:minmax(0,1.6fr) minmax(320px,.9fr)}.login-hero>.login-aside{order:-1}.login-hero .login-card{width:min(360px,calc(100% - 40px))}.login-hero .login-card h1{font-size:2.1rem}}