Suiyun Global Network Platform Home
A white cloud-platform home page: top nav with a mega menu that tucks away on scroll, dot-glow orange hero, rotating dotted globe with three features, tabbed customer testimonial, chaos-versus-delivery contrast, segmented pricing, live deploy bento, a closing banner with floating tiles and a multi-column footer.
Overview
A complete single-file page to start from. Structure, copy slots and responsive layout are all in place; copy the prompt to your model and it rewrites the copy, colors and images for your brand.
Where to use it
Development者Tool, 云服务和 API Product的官网Home.
Install
With Builder, fetch the full page source with the 8pt CLI or call it directly from an editor connected to 8pt MCP.
$ npm i -g @8pt-dev/cli && 8pt template suiyun-cloud-home
mcp › Use 8pt MCP to call get_template("suiyun-cloud-home")
Code
Single-file HTML + CSS, no build step.
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>燧云 · 为智能体时代而建的全球网络</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
<style>*{box-sizing:border-box}html,body{margin:0;background:#fff;color:#262626}body{font-family:"Inter Tight","Noto Sans SC",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}.site-nav{position:sticky;top:0;z-index:50}.site-nav .x-snv.is-compact{background:transparent}.sec-hero{padding:0 8px}.wrap{position:relative;max-width:1200px;margin:0 auto;padding:110px 0;border-left:1px dashed #E8E8E8;border-right:1px dashed #E8E8E8}.wrap::before,.wrap::after{content:"";position:absolute;top:0;width:7px;height:7px;border:1px solid #E2E2E2;background:#fff}.wrap::before{left:-4px}.wrap::after{right:-4px}.sec-cta{padding:30px 8px 0}.site-foot{margin-top:24px}.rv{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}.rv.is-in{opacity:1;transform:none}@media (max-width:1280px){.wrap{margin:0 32px}}@media (max-width:640px){.wrap{margin:0 14px;padding:72px 0;border:0}.wrap::before,.wrap::after{display:none}.sec-hero{padding:0 6px}}@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}.x-snv{position:relative;width:100%;font-family:"Inter Tight","Noto Sans SC",system-ui,sans-serif;color:#262626;background:#fff;z-index:30}.x-snv a{color:inherit;text-decoration:none}.x-snv__bar{display:flex;align-items:center;gap:20px;height:72px;padding:0 20px;box-sizing:border-box;transition:background .3s}.x-snv__mark{display:inline-flex;align-items:center;gap:8px}.x-snv__mark svg{width:30px;height:30px}.x-snv__mark b{font-size:19px;font-weight:700;letter-spacing:.08em}.x-snv__menu{display:flex;align-items:center;gap:4px;margin:0 auto;transition:opacity .3s,transform .3s}.x-snv__item{position:relative}.x-snv__link{display:inline-flex;align-items:center;gap:4px;height:36px;padding:0 12px;border:0;border-radius:999px;background:none;font:inherit;font-size:14.5px;color:inherit;cursor:pointer;transition:background .2s}.x-snv__link:hover,.x-snv__item.is-open .x-snv__link{background:#F5F3EE}.x-snv__link svg{width:14px;height:14px;color:#8a8a8a;transition:transform .25s}.x-snv__item.is-open .x-snv__link svg{transform:rotate(180deg)}.x-snv__panel{position:absolute;left:50%;top:calc(100% + 12px);width:420px;padding:22px 24px;box-sizing:border-box;border:1px solid #EBEBEB;border-radius:16px;background:#fff;box-shadow:0 24px 60px -20px rgba(60,30,10,.25);opacity:0;visibility:hidden;transform:translate(-50%,-6px);transition:opacity .25s,transform .25s,visibility .25s}.x-snv__item.is-open .x-snv__panel{opacity:1;visibility:visible;transform:translate(-50%,0)}.x-snv__ptitle{margin:0 0 12px;font-size:12px;color:#8a8a8a;letter-spacing:.08em}.x-snv__panel ul{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;margin:0;padding:0;list-style:none}.x-snv__panel a{display:flex;align-items:center;justify-content:space-between;padding:9px 10px;border-radius:10px;font-size:14.5px;transition:background .2s,color .2s}.x-snv__panel a svg{width:14px;height:14px;opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .2s}.x-snv__panel a:hover{background:#FFF4EC;color:#FF5D1D}.x-snv__panel a:hover svg{opacity:1;transform:none}.x-snv__end{display:flex;align-items:center;gap:8px;margin-left:0}.x-snv__alert{display:inline-flex;align-items:center;gap:6px;font-size:14.5px;color:#C9353E!important;margin-right:6px}.x-snv__alert svg{width:16px;height:16px}.x-snv__pill{display:inline-flex;align-items:center;height:36px;padding:0 14px;border:1px solid #EBEBEB;border-radius:999px;font-size:14.5px;transition:border-color .2s,background .2s}.x-snv__pill:hover{border-color:#d6d6d6;background:#FAFAF8}.x-snv__icon{display:inline-grid;place-items:center;width:36px;height:36px;border:1px solid #EBEBEB;border-radius:999px;background:#fff;color:inherit;cursor:pointer}.x-snv__icon svg{width:16px;height:16px}.x-snv__burger{display:none}.x-snv__cta{display:none;align-items:center;height:36px;padding:0 16px;border-radius:999px;background:#FF5D1D;color:#fff!important;font-size:14.5px;font-weight:500;box-shadow:0 6px 18px -6px rgba(255,93,29,.6)}.x-snv.is-compact .x-snv__menu,.x-snv.is-compact .x-snv__alert,.x-snv.is-compact .x-snv__pill,.x-snv.is-compact .x-snv__icon{display:none}.x-snv.is-compact .x-snv__cta{display:inline-flex;animation:x-snv-in .35s ease}.x-snv.is-compact{background:transparent}.x-snv.is-compact .x-snv__end{margin-left:auto}.x-snv__drawer{display:none}@keyframes x-snv-in{from{opacity:0;transform:translateY(-6px)}}@media (max-width:1100px){.x-snv__alert,.x-snv__hide-m{display:none}}@media (max-width:860px){.x-snv__menu{display:none}.x-snv__end{margin-left:auto}.x-snv__burger{display:inline-grid;border:0}.x-snv__icon{border:0}.x-snv__bar{height:64px;padding:0 14px}.x-snv__drawer{display:flex;flex-direction:column;gap:2px;max-height:0;overflow:hidden;padding:0 14px;background:#fff;transition:max-height .35s ease}.x-snv.is-drawer .x-snv__drawer{max-height:420px;padding-bottom:16px}.x-snv__drawer a{padding:14px 4px;border-bottom:1px solid #F0F0F0;font-size:17px}.x-snv__drawer .x-snv__dcta{margin-top:12px;border:0;border-radius:12px;background:#FF5D1D;color:#fff!important;text-align:center}.x-snv.is-compact .x-snv__cta{display:none}.x-snv.is-compact .x-snv__icon{display:inline-grid}.x-snv.is-compact .x-snv__pill{display:inline-flex}}@media (prefers-reduced-motion:reduce){.x-snv__panel,.x-snv__menu,.x-snv__drawer,.x-snv__link svg{transition:none}.x-snv.is-compact .x-snv__cta{animation:none}}.x-sgh{position:relative;width:100%;height:720px;border-radius:14px;overflow:hidden;background:#FF5D1D;color:#fff;font-family:"Inter Tight","Noto Sans SC",system-ui,sans-serif;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center}.x-sgh__dots{position:absolute;inset:0;z-index:-1;display:block;width:100%;height:100%;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.45),#000 60%);mask-image:linear-gradient(180deg,rgba(0,0,0,.45),#000 60%);animation:x-sgh-shim 6s ease-in-out infinite}.x-sgh__glow{position:absolute;left:50%;bottom:-260px;z-index:-1;width:1100px;height:560px;border-radius:50%;background:radial-gradient(closest-side,#FFF8E4 0%,#FFE2A0 30%,rgba(255,176,92,.75) 58%,rgba(255,93,29,0) 100%);box-shadow:0 -2px 0 0 rgba(255,244,220,.9),0 -24px 60px -10px rgba(255,226,160,.7);transform:translateX(-50%);filter:blur(2px);animation:x-sgh-breathe 5.5s ease-in-out infinite}.x-sgh__in{display:flex;flex-direction:column;align-items:center;max-width:100%;padding:0 32px 60px;box-sizing:border-box;text-align:center}.x-sgh h1{margin:0;font-size:clamp(34px,4.1vw,56px);font-weight:500;line-height:1.14;letter-spacing:-.015em}.x-sgh p{margin:30px 0 0;font-size:18px;line-height:1.5;opacity:.95}.x-sgh__btn{display:inline-flex;align-items:center;gap:8px;margin-top:44px;height:50px;padding:0 24px;border-radius:999px;background:#fff;color:#1d1d1d;font-size:16px;font-weight:500;text-decoration:none;box-shadow:0 10px 30px -12px rgba(120,30,0,.55);transition:transform .25s,box-shadow .25s}.x-sgh__btn svg{width:16px;height:16px;transition:transform .25s}.x-sgh__btn:hover{transform:translateY(-2px);box-shadow:0 16px 36px -14px rgba(120,30,0,.6)}.x-sgh__btn:hover svg{transform:translateX(3px)}@keyframes x-sgh-shim{50%{opacity:.55}}@keyframes x-sgh-breathe{50%{transform:translateX(-50%) scale(1.08,1.15);opacity:.85}}@media (max-width:640px){.x-sgh{height:600px}.x-sgh__in{align-self:stretch;align-items:flex-start;text-align:left;padding:40px 24px 50px}.x-sgh h1{font-size:36px;font-weight:600;line-height:1.15}.x-sgh h1 br,.x-sgh p br{display:none}.x-sgh p{font-size:18px}.x-sgh__btn{align-self:stretch;justify-content:center;height:62px;border-radius:12px}.x-sgh__glow{width:520px;height:220px;bottom:-140px}}@media (prefers-reduced-motion:reduce){.x-sgh__dots,.x-sgh__glow{animation:none}.x-sgh__btn,.x-sgh__btn svg{transition:none}}.x-dgl{width:100%;max-width:1200px;margin:0 auto;box-sizing:border-box;font-family:"Inter Tight","Noto Sans SC",system-ui,sans-serif;color:#262626;text-align:center}.x-dgl h2{margin:0;font-size:clamp(32px,3.3vw,46px);font-weight:400;letter-spacing:-.015em}.x-dgl__sub{margin:16px 0 0;font-size:17px;color:#555}.x-dgl__stage{position:relative;width:82%;margin:14px auto 0;height:500px;background:#FFFCF2;overflow:hidden}.x-dgl__cv{display:block;width:100%;height:100%}.x-dgl__feat{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #EBEBEB;background:#fff;text-align:left}.x-dgl__cell{padding:30px 32px 34px;border-left:1px solid #EBEBEB;transition:background .3s}.x-dgl__cell:first-child{border-left:0}.x-dgl__cell:hover{background:#FFF8F1}.x-dgl__cell svg{width:24px;height:24px;color:#262626}.x-dgl__cell h3{margin:16px 0 6px;font-size:16.5px;font-weight:500}.x-dgl__cell p{margin:0;font-size:14.5px;line-height:1.5;color:#666}@media (max-width:640px){.x-dgl__stage{width:100%;height:320px}.x-dgl__feat{grid-template-columns:1fr}.x-dgl__cell{border-left:0;border-top:1px solid #EBEBEB}.x-dgl__cell:first-child{border-top:0}.x-dgl__sub{padding:0 12px}}@media (prefers-reduced-motion:reduce){.x-dgl__cell{transition:none}}.x-ltq{width:100%;max-width:1200px;margin:0 auto;box-sizing:border-box;font-family:"Inter Tight","Noto Sans SC",system-ui,sans-serif;color:#262626;text-align:center}.x-ltq h2{margin:0;font-size:clamp(30px,3.1vw,44px);font-weight:400;letter-spacing:-.015em}.x-ltq__sub{margin:14px 0 30px;font-size:16px;color:#666}.x-ltq__card{width:82%;margin:0 auto;border:1px solid #EBEBEB;background:#fff;text-align:left}.x-ltq__tabs{display:flex;border-bottom:1px solid #EBEBEB;overflow:hidden}.x-ltq__tab{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;flex:1;height:52px;border:0;border-right:1px solid #F2F2F2;background:none;font:inherit;font-size:14px;color:#777;cursor:pointer;transition:color .25s,background .25s}.x-ltq__tab i{width:12px;height:12px;border-radius:4px;background:#cfcfcf}.x-ltq__tab.is-on{color:#1d1d1d;background:#FFFBF6}.x-ltq__tab--mute{cursor:default;opacity:.55}.x-ltq__bar{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:#FF5D1D}.x-ltq__tab.is-on .x-ltq__bar{animation:x-ltq-prog 6s linear forwards}.x-ltq__card:hover .x-ltq__tab.is-on .x-ltq__bar{animation-play-state:paused}.x-ltq__slides{position:relative;height:300px}.x-ltq__slide{position:absolute;inset:0;display:grid;grid-template-columns:1fr 190px;grid-template-rows:1fr auto;gap:10px 40px;margin:0;padding:40px 56px;box-sizing:border-box;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s;pointer-events:none}.x-ltq__slide.is-on{opacity:1;transform:none;pointer-events:auto}.x-ltq__slide blockquote{margin:0;align-self:center;font-size:clamp(20px,2vw,27px);line-height:1.38;letter-spacing:-.01em}.x-ltq__slide em{font-style:normal;color:#FF5D1D}.x-ltq__slide figcaption{grid-column:1;font-size:13.5px;color:#666}.x-ltq__slide figcaption b{margin-right:8px;color:#262626;font-weight:500}.x-ltq__slide img{grid-column:2;grid-row:1/3;align-self:center;width:190px;height:190px;border-radius:16px;object-fit:cover;animation:x-ltq-float 6s ease-in-out infinite}.x-ltq__more{margin:34px 0 18px;font-size:14.5px;color:#666}.x-ltq__marq{width:82%;margin:0 auto;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}.x-ltq__track{display:flex;width:max-content;animation:x-ltq-marq 30s linear infinite}.x-ltq__marq:hover .x-ltq__track{animation-play-state:paused}.x-ltq__track span{padding:0 34px;font-size:24px;font-weight:700;letter-spacing:.12em;color:#3a3a3a;white-space:nowrap}.x-ltq__track span:nth-child(3n){font-weight:400;letter-spacing:.3em}.x-ltq__track span:nth-child(4n){color:#777}@keyframes x-ltq-prog{to{width:100%}}@keyframes x-ltq-marq{to{transform:translateX(-50%)}}@keyframes x-ltq-float{50%{transform:translateY(-8px)}}@media (max-width:640px){.x-ltq__card,.x-ltq__marq{width:100%}.x-ltq__tab--mute{display:none}.x-ltq__slides{height:430px}.x-ltq__slide{grid-template-columns:1fr;grid-template-rows:auto auto auto;padding:26px 22px}.x-ltq__slide img{grid-column:1;grid-row:1;width:110px;height:110px}.x-ltq__slide blockquote{font-size:20px}}@media (prefers-reduced-motion:reduce){.x-ltq__track,.x-ltq__slide img,.x-ltq__tab.is-on .x-ltq__bar{animation:none}.x-ltq__tab.is-on .x-ltq__bar{width:100%}.x-ltq__slide{transition:none}}.x-cvs{width:100%;max-width:1200px;margin:0 auto;box-sizing:border-box;font-family:"Inter Tight","Noto Sans SC",system-ui,sans-serif;color:#262626;text-align:center}.x-cvs h2{margin:0;font-size:clamp(30px,3.2vw,46px);font-weight:400;letter-spacing:-.015em}.x-cvs__sub{margin:14px 0 34px;font-size:16px;color:#666}.x-cvs__grid{display:grid;grid-template-columns:1fr 1fr;width:82%;margin:0 auto;height:500px}.x-cvs__mess{position:relative;overflow:hidden;background:#fff;border:1px solid #F0F0F0}.x-cvs__bars{position:absolute;left:0;right:0;top:42%;height:30%;background-image:linear-gradient(90deg,rgba(255,93,29,.18) 1px,transparent 1px);background-size:7px 100%;-webkit-mask-image:radial-gradient(60% 80% at 50% 50%,#000,transparent);mask-image:radial-gradient(60% 80% at 50% 50%,#000,transparent);animation:x-cvs-noise 2.4s steps(4) infinite}.x-cvs__mess h3{position:absolute;left:0;right:0;top:44px;z-index:2;margin:0;font-size:clamp(26px,2.4vw,34px);font-weight:400;line-height:1.15;text-shadow:0 0 18px #fff,0 0 8px #fff}.x-cvs__note{position:absolute;z-index:1;max-width:240px;padding:9px 12px;border:1px solid #EFEFEF;border-radius:8px;background:rgba(255,255,255,.92);box-shadow:0 8px 24px -16px rgba(0,0,0,.35);font-size:12.5px;line-height:1.4;text-align:left;color:#444;animation:x-cvs-drift 9s ease-in-out infinite}.x-cvs__note b{display:block;font-weight:500;color:#262626}.x-cvs__note .x-cvs__p0{display:inline-block;margin-bottom:3px;padding:1px 6px;border-radius:4px;background:#FDE3E5;color:#C9353E;font-size:11.5px}.x-cvs__note:nth-child(odd){opacity:.75}.x-cvs__ship{position:relative;overflow:hidden;background:#FF5D1D;color:#fff}.x-cvs__ship h3{position:absolute;left:0;right:0;top:44px;margin:0;font-size:clamp(26px,2.4vw,34px);font-weight:400;line-height:1.15}.x-cvs__line{position:absolute;left:0;right:0;top:56%;border-top:1px dashed rgba(255,255,255,.55)}.x-cvs__toast{position:absolute;left:50%;top:56%;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid rgba(255,255,255,.4);border-radius:10px;background:rgba(255,255,255,.14);backdrop-filter:blur(6px);font-size:14px;white-space:nowrap;transform:translate(-50%,-50%)}.x-cvs__toast svg{width:16px;height:16px}.x-cvs__toast span{transition:opacity .35s,transform .35s}.x-cvs__toast.is-swap span{opacity:0;transform:translateY(6px)}@keyframes x-cvs-drift{0%,100%{transform:translate(0,0)}50%{transform:translate(10px,-8px)}}@keyframes x-cvs-noise{25%{background-position:2px 0}50%{background-position:5px 0}75%{background-position:1px 0}}@media (max-width:640px){.x-cvs__grid{grid-template-columns:1fr;width:100%;height:auto}.x-cvs__mess,.x-cvs__ship{height:420px}}@media (prefers-reduced-motion:reduce){.x-cvs__note,.x-cvs__bars{animation:none}.x-cvs__toast span{transition:none}}.x-tpt{width:100%;max-width:1200px;margin:0 auto;box-sizing:border-box;font-family:"Inter Tight","Noto Sans SC",system-ui,sans-serif;color:#262626;text-align:center}.x-tpt h2{margin:0;font-size:clamp(30px,3.2vw,46px);font-weight:400;letter-spacing:-.015em}.x-tpt__sub{margin:12px 0 28px;font-size:16px;color:#666}.x-tpt__seg{position:relative;display:inline-flex;gap:2px;padding:4px;border:1px solid #EBEBEB;border-radius:999px;background:#fff}.x-tpt__thumb{position:absolute;top:4px;bottom:4px;left:4px;width:0;border-radius:999px;background:#FF5D1D;box-shadow:0 6px 16px -8px rgba(255,93,29,.8);transition:left .35s cubic-bezier(.3,.8,.3,1),width .35s cubic-bezier(.3,.8,.3,1)}.x-tpt__seg button{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border:0;border-radius:999px;background:none;font:inherit;font-size:14px;color:#333;cursor:pointer;transition:color .3s}.x-tpt__seg button svg{width:15px;height:15px}.x-tpt__seg button.is-on{color:#fff}.x-tpt__box{position:relative;width:82%;margin:22px auto 0;border:1px solid #EBEBEB;background:#fff;text-align:left}.x-tpt__pane{display:none;animation:x-tpt-in .45s ease}.x-tpt__pane.is-on{display:block}.x-tpt__intro{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:30px 36px;border-bottom:1px solid #EBEBEB}.x-tpt__intro h4{margin:0 0 8px;font-size:16px;font-weight:500}.x-tpt__intro p{margin:0;font-size:14px;line-height:1.55;color:#666}.x-tpt__flow{padding:16px 18px;border:1px dashed #E3E3E3;border-radius:6px}.x-tpt__flow>p:first-child{display:flex;justify-content:space-between;margin:0 0 12px;font-size:12.5px;color:#888}.x-tpt__or{color:#FF5D1D}.x-tpt__chips{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.x-tpt__chips span{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;border:1px dashed #E0E0E0;border-radius:6px;font-size:12.5px;color:#333;animation:x-tpt-pulse 3s ease-in-out infinite}.x-tpt__chips span:nth-child(2){animation-delay:.3s}.x-tpt__chips span:nth-child(3){animation-delay:.6s}.x-tpt__chips span:nth-child(4){animation-delay:.9s}.x-tpt__chips span:nth-child(5){animation-delay:1.2s}.x-tpt__chips svg{width:15px;height:15px}.x-tpt__cap{margin:12px 0 0!important;font-size:12.5px!important;color:#777!important;text-align:center}.x-tpt__plans{display:grid}.x-tpt__plan{padding:26px 26px 28px;border-left:1px solid #EBEBEB}.x-tpt__plan:first-child{border-left:0}.x-tpt__plan h4{margin:0;font-size:14.5px;font-weight:500}.x-tpt__for{margin:2px 0 0;font-size:13.5px;color:#777}.x-tpt__price{margin:16px 0 14px;font-size:30px;letter-spacing:-.01em}.x-tpt__price small{margin-left:4px;font-size:12.5px;color:#777}.x-tpt__plan ul{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 26px;padding:0;list-style:none}.x-tpt__plan li{padding:3px 8px;border:1px solid #EDEDED;border-radius:4px;font-size:12px;color:#555}.x-tpt__plan a{display:inline-flex;align-items:center;height:32px;padding:0 12px;border:1px solid #E5E5E5;border-radius:999px;font-size:13.5px;color:#262626;text-decoration:none;transition:border-color .2s,color .2s}.x-tpt__plan a:hover{border-color:#FF5D1D;color:#FF5D1D}.x-tpt__row{display:grid;grid-template-columns:64px 1fr;align-items:center;gap:10px;margin:8px 0;font-size:12.5px;color:#555}.x-tpt__track{position:relative;height:14px;border-radius:3px;background:#F4F4F2}.x-tpt__track i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:repeating-linear-gradient(90deg,#E6E6E2 0 6px,#F4F4F2 6px 9px)}.x-tpt__track b{position:absolute;top:0;bottom:0;border-radius:3px;background:#FF5D1D}.x-tpt__k1,.x-tpt__k2{display:inline-block;width:10px;height:10px;margin:0 4px 0 10px;border-radius:2px;background:#E6E6E2;vertical-align:-1px}.x-tpt__k2{background:#FF5D1D}.x-tpt__note{margin:14px 0 0;font-size:12.5px;color:#999}@keyframes x-tpt-in{from{opacity:0;transform:translateY(8px)}}@keyframes x-tpt-pulse{0%,100%{border-color:#E0E0E0}50%{border-color:rgba(255,93,29,.55);color:#FF5D1D}}@media (max-width:900px){.x-tpt__box{width:100%}.x-tpt__intro{grid-template-columns:1fr;gap:18px;padding:24px 20px}.x-tpt__plans{grid-template-columns:1fr 1fr!important}.x-tpt__plan:nth-child(odd){border-left:0}.x-tpt__plan{border-top:1px solid #EBEBEB}}@media (max-width:640px){.x-tpt__plans{grid-template-columns:1fr!important}.x-tpt__plan{border-left:0}.x-tpt__seg button{padding:0 9px;font-size:12.5px;gap:4px}.x-tpt__seg button svg{display:none}.x-tpt__chips span{font-size:11px}}@media (prefers-reduced-motion:reduce){.x-tpt__pane,.x-tpt__chips span{animation:none}.x-tpt__thumb{transition:none}}.x-dbn{width:100%;max-width:1200px;margin:0 auto;box-sizing:border-box;font-family:"Inter Tight","Noto Sans SC",system-ui,sans-serif;color:#262626;text-align:center}.x-dbn h2{margin:0;font-size:clamp(30px,3.2vw,46px);font-weight:400;letter-spacing:-.015em}.x-dbn__sub{margin:14px 0 34px;font-size:16px;color:#666}.x-dbn__grid{display:grid;grid-template-columns:1fr 1fr 1fr;width:82%;margin:0 auto;text-align:left}.x-dbn__c{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:290px;padding:28px 26px;box-sizing:border-box;border:1px solid #EBEBEB;margin:-1px 0 0 -1px;background:#fff;overflow:hidden}.x-dbn__c h3{margin:0 0 8px;font-size:16px;font-weight:500}.x-dbn__c p{margin:0;font-size:14px;line-height:1.55;color:#666;max-width:440px}.x-dbn__c>svg{width:22px;height:22px;margin-bottom:12px}.x-dbn__c--wide,.x-dbn__c--ai{grid-column:span 2}.x-dbn__c--or{justify-content:flex-start;background:#FF5D1D;color:#fff;border-color:#FF5D1D}.x-dbn__c--or p{color:rgba(255,255,255,.92)}.x-dbn__deploy{position:absolute;left:24px;right:24px;top:22px;display:flex;gap:14px}.x-dbn__app{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:8px;background:#FF5D1D;color:#fff}.x-dbn__app svg{width:24px;height:24px}.x-dbn__list{flex:1;margin:0;padding:0;list-style:none;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}.x-dbn__list li{display:grid;grid-template-columns:1fr 1fr auto;align-items:center;height:36px;margin-bottom:6px;padding:0 14px;border-radius:4px;background:#FFF1E8;font-family:"JetBrains Mono","Noto Sans SC",ui-monospace,monospace;font-size:12.5px;color:#FF5D1D;animation:x-dbn-push .5s ease}.x-dbn__list li em{display:inline-flex;align-items:center;gap:6px;font-style:normal;font-family:"Inter Tight","Noto Sans SC",system-ui,sans-serif}.x-dbn__list li em i{width:12px;height:12px;border-radius:50%;border:1.6px solid currentColor;box-sizing:border-box}.x-dbn__list li[data-s="build"] em i{border-right-color:transparent;animation:x-dbn-spin .8s linear infinite}.x-dbn__list li[data-s="queue"]{opacity:.55}.x-dbn__list li[data-s="done"] em i{background:#FF5D1D;border-color:#FF5D1D}.x-dbn__c--sec{justify-content:flex-end}.x-dbn__shield{position:absolute;right:-20px;top:-10px;width:200px;height:200px;color:rgba(255,93,29,.22)}.x-dbn__shield svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:.5;stroke-dasharray:60;animation:x-dbn-draw 4s ease-in-out infinite}.x-dbn__c--ai{flex-direction:row;align-items:flex-end;gap:26px}.x-dbn__c--ai>div:first-child{flex:1}.x-dbn__term{flex:1.1;align-self:stretch;padding:14px 16px;border:1px solid #EFEFEF;border-radius:6px;background:linear-gradient(#fff,#FFFAF5);box-shadow:0 14px 40px -26px rgba(120,50,10,.4);font-family:"JetBrains Mono","Noto Sans SC",ui-monospace,monospace;font-size:12px;color:#444}.x-dbn__tl{margin:0 0 10px!important;font-size:12.5px!important;color:#262626!important}.x-dbn__lines div{display:flex;align-items:center;gap:8px;height:24px;opacity:0;animation:x-dbn-type .4s ease forwards}.x-dbn__lines code{padding:1px 6px;border-radius:4px;background:#FFE9DC;color:#C64A12;font:inherit}.x-dbn__lines .x-dbn__ok{color:#FF5D1D}@keyframes x-dbn-push{from{opacity:0;transform:translateY(-10px)}}@keyframes x-dbn-spin{to{transform:rotate(360deg)}}@keyframes x-dbn-draw{0%{stroke-dashoffset:60}60%,100%{stroke-dashoffset:0}}@keyframes x-dbn-type{to{opacity:1}}@media (max-width:900px){.x-dbn__grid{grid-template-columns:1fr;width:100%}.x-dbn__c--wide,.x-dbn__c--ai{grid-column:auto}.x-dbn__c--wide{min-height:330px}.x-dbn__c--ai{flex-direction:column;align-items:stretch}.x-dbn__list li{grid-template-columns:1fr auto}.x-dbn__list li span:nth-child(2){display:none}}@media (prefers-reduced-motion:reduce){.x-dbn__list li,.x-dbn__list li em i,.x-dbn__shield svg{animation:none}.x-dbn__lines div{animation:none;opacity:1}}.x-ctg{position:relative;width:100%;height:520px;border-radius:14px;overflow:hidden;background:#FF5D1D;color:#fff;font-family:"Inter Tight","Noto Sans SC",system-ui,sans-serif;isolation:isolate}.x-ctg__dots{position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(255,236,214,.34) 1px,transparent 1.3px);background-size:6px 6px;animation:x-ctg-shim 6s ease-in-out infinite}.x-ctg__glow{position:absolute;left:50%;bottom:-120px;z-index:-1;width:640px;height:300px;border-radius:50%;background:radial-gradient(closest-side,#FFF6D8 0%,#FFD98A 34%,rgba(255,160,70,.5) 62%,rgba(255,93,29,0) 100%);transform:translateX(-50%);animation:x-ctg-breathe 5.5s ease-in-out infinite}.x-ctg__tile{position:absolute;display:grid;place-items:center;width:62px;height:62px;border:1px solid rgba(255,255,255,.45);border-radius:10px;background:rgba(255,255,255,.14);box-shadow:0 10px 24px -14px rgba(120,30,0,.6);transform:rotate(var(--r));animation:x-ctg-float 7s ease-in-out infinite}.x-ctg__tile svg{width:24px;height:24px}.x-ctg__in{position:relative;display:flex;flex-direction:column;align-items:center;padding:120px 24px 0;text-align:center}.x-ctg h2{margin:0;font-size:clamp(32px,3.4vw,48px);font-weight:400;letter-spacing:-.015em}.x-ctg p{margin:22px 0 0;max-width:560px;font-size:16.5px;line-height:1.55;opacity:.95}.x-ctg__btns{display:flex;gap:10px;margin-top:32px}.x-ctg__btns a{display:inline-flex;align-items:center;gap:6px;height:46px;padding:0 22px;border-radius:999px;font-size:15px;font-weight:500;text-decoration:none;transition:transform .25s,background .25s}.x-ctg__btns svg{width:15px;height:15px}.x-ctg__b1{background:#fff;color:#1d1d1d}.x-ctg__b2{background:rgba(255,255,255,.18);color:#fff}.x-ctg__btns a:hover{transform:translateY(-2px)}.x-ctg__b2:hover{background:rgba(255,255,255,.28)}.x-ctg__strip{position:absolute;left:0;right:0;bottom:0;height:52px;display:flex;align-items:center;overflow:hidden;background:rgba(214,64,8,.55)}.x-ctg__run{display:flex;width:max-content;animation:x-ctg-run 26s linear infinite}.x-ctg__run span{display:inline-flex;align-items:center;gap:8px;padding:0 32px;font-size:14.5px;white-space:nowrap}.x-ctg__run svg{width:16px;height:16px}@keyframes x-ctg-float{50%{transform:rotate(var(--r)) translateY(-12px)}}@keyframes x-ctg-run{to{transform:translateX(-50%)}}@keyframes x-ctg-shim{50%{opacity:.55}}@keyframes x-ctg-breathe{50%{transform:translateX(-50%) scale(1.08,1.15);opacity:.85}}@media (max-width:640px){.x-ctg{height:600px}.x-ctg__in{padding-top:130px}.x-ctg__btns{flex-direction:column;align-self:stretch}.x-ctg__btns a{justify-content:center}.x-ctg__tile{width:46px;height:46px}.x-ctg__tile svg{width:18px;height:18px}.x-ctg__tile:nth-child(n+5){display:none}}@media (prefers-reduced-motion:reduce){.x-ctg__tile,.x-ctg__run,.x-ctg__dots,.x-ctg__glow{animation:none}.x-ctg__btns a{transition:none}}.x-sft{width:100%;box-sizing:border-box;padding:40px 32px 28px;font-family:"Inter Tight","Noto Sans SC",system-ui,sans-serif;color:#262626;background:#fff}.x-sft a{color:inherit;text-decoration:none}.x-sft__mark{display:inline-flex;align-items:center;gap:8px}.x-sft__mark svg{width:26px;height:26px}.x-sft__mark b{font-size:17px;font-weight:700;letter-spacing:.08em}.x-sft__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:34px 20px;margin:26px 0 0 18%}.x-sft__cols p{margin:0 0 12px;font-size:12.5px;color:#888}.x-sft__cols ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}.x-sft__cols a{font-size:14.5px;transition:color .2s}.x-sft__cols a:hover{color:#FF5D1D}.x-sft__legal{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:56px;padding-top:18px;border-top:1px solid #EFEFEF;font-size:12.5px;color:#777}.x-sft__legal nav{display:flex;flex-wrap:wrap;gap:18px}.x-sft__legal a:hover{color:#262626}@media (max-width:640px){.x-sft{padding:32px 18px 24px}.x-sft__cols{grid-template-columns:1fr 1fr;margin-left:0}.x-sft__legal{flex-direction:column;align-items:flex-start}}@media (prefers-reduced-motion:reduce){.x-sft__cols a{transition:none}}</style>
</head>
<body>
…Subscribe to Builder to see the full source.See pricing