*{box-sizing:border-box} :root{--max:1200px} body{ margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei"; background:#fff;color:#111;overflow-x:hidden } .container{ width:min(var(--max),calc(100% - 80px)); margin:auto } #cursor{ position:fixed;width:260px;height:260px;border-radius:50%; background:radial-gradient(circle,rgba(80,120,255,.14),transparent 70%); pointer-events:none;transform:translate(-50%,-50%);z-index:99 } nav{ position:fixed;top:0;left:0;right:0;height:72px; display:flex;justify-content:space-between;align-items:center; padding:0 60px;background:rgba(255,255,255,.75); backdrop-filter:blur(18px);z-index:20 } .logo{font-weight:900} button{ background:#111;color:#fff;border:0;border-radius:30px; padding:13px 28px;transition:.4s } button:hover{transform:scale(1.06)} .hero{ height:100vh;display:flex;align-items:center; justify-content:center;text-align:center } .hero-content{transition:.15s ease} h1{ font-size:110px;letter-spacing:-7px;line-height:1;margin:0 } .hero h2{font-size:34px;margin:35px 0 20px} .desc{color:#777;font-size:18px;line-height:2} .product-stage{ min-height:120vh;background:linear-gradient(#fff,#f7f8fb,#fff); display:flex;align-items:center } .product{ width:100%;padding:50px;background:#fff;border-radius:40px; box-shadow:0 40px 100px rgba(0,0,0,.1); transition:.15s } .product h2{font-size:38px} .flow{ display:grid;grid-template-columns:repeat(3,1fr); gap:25px;margin-top:50px } .node{ height:170px;border-radius:28px;background:#f5f6f8; display:flex;align-items:center;justify-content:center; font-size:24px;transition:.4s } .node:hover{ transform:translateY(-15px); background:#fff; box-shadow:0 25px 60px rgba(0,0,0,.12) } .story{ min-height:100vh;display:flex;align-items:center;gap:100px } .story>div{flex:1} .story-text{ display:flex;flex-direction:column; justify-content:center;align-items:center;text-align:center } .story h2{ font-size:70px;letter-spacing:-4px;line-height:1.1 } .story p{ color:#777;font-size:20px;line-height:1.8 } .step{ padding:35px;margin:30px 0; border-left:3px solid #ddd; opacity:.75;color:#333; transition:.45s cubic-bezier(.22,.61,.36,1); cursor:pointer;position:relative } .step:hover,.step.active{ opacity:1;color:#111; transform:translateX(25px); border-color:#111; background:linear-gradient(90deg,rgba(0,0,0,.05),transparent) } .step:hover:before,.step.active:before{ content:"";position:absolute;left:-3px;top:0; height:100%;width:3px;background:#111 } .cards{ padding:120px 0; display:grid;grid-template-columns:repeat(3,1fr); gap:30px } .card{ padding:40px;min-height:260px; border-radius:35px;border:1px solid #eee; transition:.5s } .card:hover{ transform:translateY(-15px); box-shadow:0 30px 70px rgba(0,0,0,.1) } .card h2{font-size:32px} .card p{color:#777;line-height:1.8} .end{ background:#f5f6f8;color:#111; padding:88px 0 34px; border-top-left-radius:36px; border-top-right-radius:36px; margin-top:80px; position:relative; overflow:hidden } .end::before{ content:""; position:absolute; right:7%; top:130px; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle,rgba(132,155,255,.22) 0%,rgba(132,155,255,.12) 34%,rgba(132,155,255,0) 72%); filter:blur(12px); pointer-events:none } .footer-shell{ width:min(1240px,calc(100% - 120px)); margin:0 auto; position:relative; z-index:1 } .footer-top{ display:grid; grid-template-columns:minmax(420px,1.08fr) minmax(260px,.92fr); gap:56px; align-items:start; padding-bottom:72px } .footer-copy{ max-width:650px } .footer-eyebrow{ margin:0 0 28px; font-size:18px; letter-spacing:.24em; color:#7b7f88 } .footer-title{ margin:0; font-size:76px; line-height:1.08; letter-spacing:-.05em; font-weight:800 } .footer-desc{ margin:34px 0 0; font-size:18px; line-height:1.8; color:#5f6773 } .footer-visual{ min-height:320px; position:relative } .footer-links{ display:grid; grid-template-columns:repeat(3,minmax(160px,1fr)); gap:46px; padding-top:8px } .footer-col h3{ margin:0 0 24px; font-size:16px; font-weight:700; color:#111 } .footer-col a{ display:block; margin:0 0 14px; font-size:15px; line-height:1.7; color:#66707d; text-decoration:none } .footer-col a:hover{color:#111} .footer-meta{ margin-top:28px; padding-top:28px; border-top:1px solid rgba(17,17,17,.08) } .footer-meta p{ margin:0 0 8px; font-size:14px; line-height:1.8; color:#8b93a0 } .footer-mark{ margin-top:28px; padding-top:26px; border-top:1px solid rgba(17,17,17,.08); display:flex; justify-content:center; align-items:center } .footer-mark img{ width:140px; max-width:26vw; height:auto; display:block } @media(max-width:800px){ h1{font-size:55px} .footer-shell{width:calc(100% - 40px)} .footer-top{grid-template-columns:1fr;gap:28px;padding-bottom:42px} .footer-title{font-size:46px} .footer-eyebrow{font-size:15px;margin-bottom:18px} .footer-desc{font-size:16px;margin-top:22px} .footer-visual{min-height:120px} .end::before{right:50%;transform:translateX(50%);top:220px;width:220px;height:220px} .footer-links{grid-template-columns:1fr 1fr;gap:28px} .footer-mark img{width:84px} .container{width:calc(100% - 40px)} .flow,.cards{grid-template-columns:1fr} .story{display:block;padding:80px 0} .end h2{font-size:45px} } .ai-bottom-logo{ position:relative; width:100%; display:flex; justify-content:center; align-items:center; padding:20px 0 10px; background:transparent; } .ai-bottom-logo img{ width:86px; height:auto; display:block; } .end{height:70vh!important;background:linear-gradient(180deg,#ffffff,#f5f7fb)!important;display:flex!important;align-items:center!important;justify-content:center!important;color:#111!important;} .footer-brand img{width:180px!important;height:auto!important;display:block!important;} .footer-mark, .footer-meta, .ai-bottom-logo, .final-logo-fixed { background: #f5f6f8 !important; } .end { background: #f5f6f8 !important; } .end, .footer-mark, .footer-meta { background:#fff !important; } .end::before{ opacity:.35; } .footer-mark, .footer-mark::before, .footer-logo-area { background: inherit !important; } .footer-mark, .footer-mark::before, .footer-logo-area, .ai-bottom-logo, .final-logo-fixed { background:#ffffff !important; } .end{ padding-top:40px !important; } .footer-shell{ transform:translateY(35px); } .footer-mark{ margin-top:20px !important; } .top-logo{width:90px;height:auto;display:block;} .brand-name{display:flex;align-items:center;} .logo{display:flex!important;align-items:center!important;} .top-logo{width:90px!important;height:auto!important;display:block!important;} .footer-mark, .ai-bottom-logo, .final-logo-fixed { display:none !important; }