@font-face{font-family:Inter;src:url("./assets/font-inter-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url("./assets/font-inter-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url("./assets/font-inter-600.woff2") format("woff2");font-weight:600 900;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("./assets/font-serif-italic.woff2") format("woff2");font-style:italic;font-weight:400 800;font-display:swap}
@font-face{font-family:"Fragment Mono";src:url("./assets/font-mono.woff2") format("woff2");font-weight:400;font-display:swap}
:root{--bg:#f0f0f0;--ink:#000;--muted:#7e7e7e;--serif:"Source Serif 4",Georgia,serif;--sans:Inter,"PingFang SC","Microsoft YaHei",sans-serif;--gutter:40px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:500;-webkit-font-smoothing:antialiased}
body.demo-open{overflow:hidden}
button,input,select{font:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid #6c45ff;outline-offset:4px}
h1,h2,h3,p,figure{margin:0}
em{font-family:var(--serif);font-style:italic}
sup{vertical-align:top}
[hidden]{display:none!important}
.wrap{width:min(1200px,calc(100% - 2 * var(--gutter)));margin-inline:auto}
.skip-link{position:fixed;top:8px;left:8px;padding:12px;background:#fff;z-index:200;transform:translateY(-150%)}
.skip-link:focus{transform:none}
.brand{display:inline-block;font-family:var(--serif);font-weight:600;font-style:italic;font-size:30px;letter-spacing:-.079em;line-height:1}
.brand sup,.hero em sup{font-family:var(--sans);font-weight:600;font-style:normal;letter-spacing:-.04em;font-size:.28em;line-height:1;margin-left:.3em;position:relative;top:.1em}
.hero{height:850px;position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr);align-items:center}
.hero-visual{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-visual::after{content:"";position:absolute;inset:auto 0 0;height:216px;background:linear-gradient(transparent,#f0f0f0 88%)}
.hero-visual img{position:absolute;display:block;height:900px;width:1338px;max-width:none;right:calc((100vw - min(1200px, 100vw - 2 * var(--gutter))) / 2 - 400px);top:-66px;object-fit:cover;transform:rotate(-75deg);animation:wave-in 1.2s cubic-bezier(.22,1,.36,1) both}
@keyframes wave-in{from{opacity:0;transform:translate(20px,-18px) rotate(-75deg) scale(1.035)}to{opacity:1;transform:rotate(-75deg)}}
.hero-wrap{position:relative}
.hero-tags{width:493px;max-width:100%;margin:0 0 32px;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.tag-track{display:flex;width:max-content;animation:marquee 22s linear infinite}
.tag-set{display:flex;align-items:center;gap:16px;padding-right:16px}
.tag-set span,.section-pill{display:inline-flex;align-items:center;white-space:nowrap;border-radius:999px;background:#fff;color:#000;font-weight:600;line-height:1}
.tag-set span{min-height:34px;padding:7px 17px;font-size:17px;letter-spacing:-.03em}
@keyframes marquee{to{transform:translateX(-50%)}}
.hero h1{font-size:clamp(52px,5.7vw,82px);line-height:1.035;font-weight:600;letter-spacing:-.072em;max-width:660px}
.hero h1 em{font-weight:600;letter-spacing:-.081em}
.hero h1 em sup{font-size:.19em;top:.46em;letter-spacing:0}
.hero-sub{margin-top:29px;font-size:20px;line-height:1.42;letter-spacing:-.04em;color:var(--muted)}
.hero-actions{display:flex;align-items:center;gap:16px;margin-top:32px}
.pill-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;min-width:150px;padding:0 28px;border:0;border-radius:999px;background:linear-gradient(180deg,#000 48%,#242424);color:#fff;font-size:17px;font-weight:600;letter-spacing:-.035em;transition:transform .25s,box-shadow .25s;text-align:center}
.pill-button:hover{transform:translateY(-2px);box-shadow:0 8px 16px #0002}
.call-pill{display:inline-flex;align-items:center;gap:8px;padding:4px 17px 4px 4px;min-height:56px;min-width:225px;border:4px solid #f8f8f8;border-radius:999px;background:#fff;color:#000;text-align:left;box-shadow:0 6px 9px #0001,0 15px 22px #00000008;transition:transform .25s;white-space:nowrap}
.call-pill:hover{transform:translateY(-3px)}
.call-photo{display:block;border-radius:50%;width:40px;height:40px;object-fit:cover;background:#dedbd6}
.call-pill strong,.call-pill small{display:block}
.call-pill strong{font-weight:600;font-size:14px;letter-spacing:-.045em}
.call-pill small{color:#929292;font-size:12px;margin-top:2px}
.call-pill small i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#35cd69;margin-right:3px}
.channels{height:145px;display:flex;align-items:center;gap:40px}
.channels>p{font-size:14px;color:#8c8c8c;line-height:1.45;min-width:148px}
.channel-window{overflow:hidden;flex:1;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.channel-track{display:flex;width:max-content;animation:marquee 35s linear infinite}
.channel-set{display:flex;align-items:center;gap:48px;padding-right:48px;color:#555}
.channel-set span{display:flex;align-items:center;gap:7px;font-size:25px;font-weight:600;letter-spacing:-.07em;white-space:nowrap}
.channel-set img{flex:none;object-fit:contain;border-radius:5px;filter:grayscale(1)}
.workflow{padding:49px 0 0}
.section-lead{text-align:center}
.section-pill{min-height:32px;padding:6px 16px;font-size:16px;letter-spacing:-.04em}
.section-lead h2,.orbit-center h2{font-size:56px;letter-spacing:-.065em;font-weight:600;line-height:1.12}
.section-lead h2{margin:59px 0 48px}
.step-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.step-card{border-radius:16px;background:#fff;border:6px solid #f8f8f8;min-width:0;min-height:424px;box-shadow:0 4px 6px #00000009,0 13px 20px #0000000b;overflow:hidden;display:flex;flex-direction:column}
.step-art{height:270px;position:relative;isolation:isolate;overflow:hidden}
.step-copy{padding:24px 26px 25px}
.step-copy h3{font-size:28px;line-height:1.2;letter-spacing:-.065em;font-weight:600;margin-bottom:10px}
.step-copy p{font-size:17px;color:#929292;letter-spacing:-.032em;line-height:1.5}
.mini-plan{position:relative;margin:26px;padding:28px 32px 35px;background:linear-gradient(#f1f1f1 63%,#fff 100%);border-radius:10px;display:flex;flex-direction:column;align-items:flex-start;gap:11px}
.mini-plan .brand{font-size:26px}
.mini-plan strong{font-size:36px;line-height:1.2;letter-spacing:-.06em}
.mini-plan button{height:56px;border:0;border-radius:999px;background:linear-gradient(180deg,#000 45%,#222);color:white;width:100%;font-size:17px;font-weight:600;margin-top:8px}
.mini-badge{position:absolute;top:16px;right:16px;background:#fff;border-radius:30px;padding:5px 11px;font-size:13px}
.art-tags{display:grid;align-content:center;gap:23px;mask-image:linear-gradient(180deg,#0000,#000 20%,#000 74%,#0000)}
.art-tags>div{display:flex;justify-content:center;gap:11px;white-space:nowrap;transform:translateX(-15px)}
.art-tags>div:nth-child(2){transform:translateX(27px)}
.art-tags>div:nth-child(3){transform:translateX(-22px)}
.art-tags span{border-radius:99px;padding:9px 14px;background:#f2f2f2;font-size:15px;color:#888}
.step-icon{display:grid;place-items:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:86px;width:86px;border-radius:16px;background:#050505;color:#fff;font-family:var(--serif);font-style:italic;font-size:67px;font-weight:600;line-height:1;box-shadow:0 0 45px 24px #fffc}
.art-cards{display:grid;place-items:center;perspective:600px}
.stack-panel{position:absolute;width:59%;height:56%;border-radius:11px;box-shadow:0 12px 25px #0002;padding:14px;font-family:"Fragment Mono",monospace;font-size:9px;overflow:hidden}
.stack-panel>div{height:75%;margin-top:13px;border-radius:4px}
.stack-back{background:#e6d7ff;transform:translate(38px,-14px) rotate(15deg);color:#5935a1}
.stack-back>div{background:linear-gradient(135deg,#7745ef,#e6d7ff)}
.stack-middle{background:#85d7f8;transform:translate(-23px,-11px) rotate(-15deg);color:#134665}
.stack-middle>div{background:linear-gradient(145deg,#c9faff,#35b7eb)}
.stack-front{background:#10101a;color:#fff;transform:translateY(9px) rotate(-2deg);box-shadow:0 14px 20px #0003}
.stack-front>div{background:linear-gradient(#292639,#151525);display:grid;align-items:center;padding:8px}
.stack-front svg{width:100%}
.orbit-section{padding-top:104px}
.orbit-wrap{position:relative;height:734px;display:grid;place-items:start center;overflow:hidden}
.orbit{position:absolute;inset:0;mask-image:linear-gradient(#000 70%,transparent 99%)}
.orbit-image{width:110px;height:110px;position:absolute;border-radius:50%;border:6px solid #fff;box-shadow:0 11px 23px #00000017;object-fit:cover;transform:translate(-50%,-50%) rotate(var(--rotation));background:#e5e5e5}
.orbit-center{text-align:center;margin-top:327px;position:relative;z-index:1}
.orbit-center h2{margin-bottom:40px}
.orbit-center .call-pill{margin-inline:auto}
.showcase{height:calc(100svh + var(--scroll-run,2250px));position:relative;background:#050505}
.showcase-sticky{position:sticky;top:0;height:100svh;overflow:hidden}
.showcase-track{display:flex;width:max-content;height:100%;will-change:transform}
.showcase-slide{position:relative;width:100svh;height:100%;display:grid;place-items:center;overflow:hidden;isolation:isolate;color:#fff;background:#080808}
.showcase-slide::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--slide-image) center/cover no-repeat}
.showcase-strategy{--slide-image:url("./assets/creative-01.webp")}
.showcase-creative{--slide-image:url("./assets/creative-02.webp")}
.showcase-launch{--slide-image:url("./assets/creative-03.webp")}
.showcase-report{--slide-image:url("./assets/creative-04.webp")}
.showcase-slide figcaption{position:absolute;bottom:19px;inset-inline:20px;text-align:center;color:#ffffff9c;font-size:14px;letter-spacing:-.025em}
.sample{height:auto;width:75%;aspect-ratio:1.486;border-radius:10px;background:#000;position:relative;overflow:hidden;isolation:isolate;container-type:inline-size}
.sample-title{position:absolute;z-index:2;left:6%;bottom:24%;width:41%}
.sample-title b,.report-head b{display:block;font-size:3.6cqw;font-weight:600;letter-spacing:-.06em;line-height:1.1}
.sample-title p,.report-head p{font-size:1.52cqw;color:#a7a7a7;margin-top:1.2cqw;line-height:1.4}
.sample-title span{display:inline-block;background:#fff;color:#101010;border-radius:20px;padding:.45cqw 1cqw;margin-top:1.6cqw;font-family:"Fragment Mono",monospace;font-size:1cqw}
.sample-strategy .sample-title{inset:20% auto auto 50%;transform:translateX(-50%);text-align:center;width:73%}
.sample-strategy .sample-title b{font-size:2.4cqw}
.sample-mark{position:absolute;left:50%;top:8%;transform:translateX(-50%);width:4.3cqw;height:4.3cqw;border-radius:50%;display:grid;place-items:center;font-size:2.6cqw;background:linear-gradient(135deg,#fff,#656565);color:#050505}
.sample-orbs{position:absolute;inset:0;background:url("./assets/creative-01.webp") center/133.333% auto no-repeat;clip-path:inset(39% 0 0)}
.sample-ribbon{position:absolute;inset:0;z-index:-1;background:url("./assets/hero.webp") center/100% auto no-repeat;transform:rotate(22deg) scale(1.25);filter:saturate(1.22)}
.sample-creative .sample-ribbon{transform:rotate(19deg) scale(1.5);filter:hue-rotate(-24deg) saturate(1.4)}
.sample-devices{position:absolute;left:44%;top:25%;width:37%;height:45%;transform:rotate(-11deg) skewY(9deg)}
.sample-devices>div{position:absolute;inset:0;background:#06070c;border:2px solid #171c32;border-radius:7px;box-shadow:0 6px 16px #000a;transform:translate(-16%,22%)}
.sample-devices>div:nth-child(2){transform:translate(-8%,11%);background:#111925}
.sample-devices>div:nth-child(3){transform:none;padding:8%;color:#e8e8f5}
.sample-devices small{font-family:"Fragment Mono",monospace;font-size:1.4cqw}
.sample-devices i{display:block;width:56%;height:14%;border-radius:4px;background:#4f3cff;margin-top:6%}
.sample-devices i:nth-of-type(2){background:#f269d3;margin-left:auto}
.sample-devices i:nth-of-type(3){background:#ffdb45}
.sample-launch .sample-title{left:50%;top:11%;bottom:auto;transform:translateX(-50%);text-align:center;width:74%}
.sample-launch .sample-ribbon{transform:rotate(-13deg) scale(1.2) translateY(15%);filter:hue-rotate(-17deg) brightness(.92)}
.sample-dashboard{position:absolute;left:20%;right:16%;top:45%;height:66%;overflow:hidden;background:#171a22;border:1px solid #323948;border-radius:8px;box-shadow:0 10px 35px #0009;font-size:1.5cqw;color:#d1d9e8}
.sample-dashboard>div{background:#222632;padding:2% 4%;display:flex;align-items:center;gap:1%;font-size:1.2cqw}
.sample-dashboard i{width:.8cqw;height:.8cqw;border-radius:50%;background:#5277f1}
.sample-dashboard section{display:grid;grid-template-columns:27% 1fr;padding:4%;gap:6%}
.sample-dashboard aside{border-right:1px solid #ffffff1f;color:#aebad0}
.sample-dashboard p{background:#2c3243;margin-top:4%;padding:2%;display:flex;justify-content:space-between;align-items:center}
.sample-dashboard em{font:inherit;font-size:1.1cqw;color:#8cf5cf}
.report-head{height:52%;display:flex;align-items:center;justify-content:space-between;padding:0 11%;background:#141414}
.report-head>div:first-child{width:63%}
.report-head small{display:block;margin-bottom:2%;font-size:1.1cqw;font-family:"Fragment Mono",monospace;color:#ccc}
.report-grid{width:31%;height:80%;border-radius:45%;background:radial-gradient(circle at center,#6d6d6d 0 20%,transparent 27%) 0 0/9px 9px;transform:rotate(-25deg);mask-image:radial-gradient(ellipse,#000,transparent 74%)}
.report-body{height:48%;display:grid;align-content:center;justify-items:center;gap:1.5cqw;text-align:center}
.report-body span{font-size:2.1cqw}
.report-body strong{font-size:2.7cqw;font-weight:600}
.report-body small{color:#999;font-size:1.45cqw}
.appear.is-pending{opacity:0;transform:translateY(23px);filter:blur(7px)}
.appear{transition:opacity .7s,transform .7s cubic-bezier(.22,1,.36,1),filter .65s}
.step-card:nth-child(2){transition-delay:.07s}
.step-card:nth-child(3){transition-delay:.14s}
.demo-dialog{width:min(520px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;border:0;border-radius:22px;background:#f8f8f8;padding:26px;color:#000;box-shadow:0 24px 90px #0005}
.demo-dialog::backdrop{background:#0006;backdrop-filter:blur(8px)}
.demo-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}
.demo-close{border:0;background:#eee;border-radius:50%;width:36px;height:36px;font-size:24px}
.demo-dialog h2{font-size:clamp(27px,6vw,38px);letter-spacing:-.07em;margin-top:11px}
.demo-dialog p{color:#707070;font-size:14px;line-height:1.55;margin:9px 0 22px}
.demo-tag{display:inline-flex;border-radius:999px;background:#e9e9e9;padding:5px 10px;font-size:12px}
.demo-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.demo-dialog label{display:grid;gap:7px;font-size:14px;margin-bottom:14px}
.demo-dialog input,.demo-dialog select{border:1px solid #ddd;border-radius:9px;background:#fff;padding:11px 10px;min-width:0;width:100%;height:44px;color:#000}
.demo-dialog .pill-button{width:100%;margin-top:8px;min-height:48px}
.demo-foot{border-top:1px solid #ddd;margin-top:20px;padding-top:13px;color:#6b6b6b;font-size:12px;line-height:1.5}
#demo-result ol{display:grid;gap:9px;padding:0;list-style:none;counter-reset:demo}
#demo-result li{counter-increment:demo;display:grid;grid-template-columns:28px 1fr;column-gap:9px;align-items:center;background:#fff;padding:10px 12px;border-radius:10px}
#demo-result li::before{content:counter(demo,decimal-leading-zero);color:#7d62eb;font-family:"Fragment Mono",monospace;font-size:12px;grid-row:span 2}
#demo-result li b{font-size:14px}
#demo-result li span{font-size:12px;color:#777;line-height:1.5}
@media(max-width:1199px){
  .hero-visual img{right:-400px}
  .hero h1{font-size:clamp(54px,6.8vw,82px)}
  .orbit-image{width:9vw;height:9vw}
}
@media(max-width:809px){
  :root{--gutter:24px}
  .hero{height:900px;align-items:start}
  .hero-wrap{padding-top:160px}
  .hero-visual img{height:auto;width:100%;top:auto;bottom:-24px;right:0;transform:none;animation:wave-mobile-in .9s both}
  @keyframes wave-mobile-in{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
  .hero-visual::after{height:132px;background:linear-gradient(transparent,#f0f0f0 93%)}
  .hero h1{font-size:clamp(39px,11.25vw,65px);letter-spacing:-.066em;line-height:1.09}
  .hero-tags{margin-bottom:31px}
  .hero-sub{font-size:19px;margin-top:25px;line-height:1.47}
  .hero-actions{align-items:flex-start;flex-direction:column;gap:16px;margin-top:31px}
  .channels{height:auto;min-height:118px;gap:10px;flex-direction:column;justify-content:center;align-items:stretch;text-align:center}
  .channels>p br{display:none}
  .channel-set{gap:28px;padding-right:28px}
  .channel-set span{font-size:21px}
  .workflow{padding-top:49px}
  .section-lead h2,.orbit-center h2{font-size:clamp(32px,8.6vw,48px)}
  .section-lead h2{margin:35px 0 34px}
  .step-grid{grid-template-columns:1fr;gap:18px;max-width:510px;margin-inline:auto}
  .step-card{min-height:357px}
  .step-art{height:231px}
  .step-copy{padding:13px 20px 23px}
  .step-copy h3{font-size:25px}
  .step-copy p{font-size:16px}
  .mini-plan{margin:20px;padding:22px 24px}
  .mini-plan strong{font-size:30px}
  .mini-plan button{height:48px;margin-top:4px}
  .orbit-section{padding-top:64px}
  .orbit-wrap{width:100%;height:510px}
  .orbit-image{width:65px;height:65px;border-width:4px}
  .orbit-center{margin-top:223px}
  .orbit-center h2{margin-bottom:24px}
  .showcase{height:auto}
  .showcase-sticky{height:auto;position:relative;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin}
  .showcase-track{height:auto;transform:none!important}
  .showcase-slide{width:100vw;height:112vw;min-height:410px;scroll-snap-align:start}
  .sample{width:88%}
  .showcase-slide::before{background-size:100% 100%}
  .showcase-slide figcaption{font-size:12px}
}
@media(max-width:365px){
  :root{--gutter:18px}
  .hero h1{font-size:36px}
  .hero-sub{font-size:17px}
  .demo-fields{grid-template-columns:1fr;gap:0}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .showcase{height:auto}
  .showcase-sticky{height:auto;position:relative;overflow-x:auto;scroll-snap-type:x mandatory}
  .showcase-slide{width:min(900px,100vw);height:min(900px,100vw);scroll-snap-align:start}
  .showcase-track{transform:none!important}
}