.hero{position:relative;overflow:hidden;padding:150px 0 48px}.hero-bg{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(to right,rgba(17,17,19,.045) 1px,transparent 1px),linear-gradient(to bottom,rgba(17,17,19,.045) 1px,transparent 1px);background-size:72px 72px;background-position:center top;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 20%,transparent 75%)}.hero-inner{position:relative;z-index:2}.hero-copy{max-width:1200px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center}.hero-copy .display{margin:28px 0 26px;font-size:clamp(40px,6.1vw,88px)}.hero-copy .lead{max-width:40em}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}.hero-copy .hero-actions{justify-content:center}.hero-canvas{position:relative;height:clamp(380px,44vw,620px);margin-top:-70px;opacity:0;transform:translateY(40px);transition:opacity 1.4s var(--ease) .3s,transform 1.6s var(--ease) .3s}.hero-canvas.is-ready{opacity:1;transform:none}.hero-canvas canvas{position:absolute;inset:0}.hero-canvas:after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(transparent,var(--bg));pointer-events:none}.hero-foot{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:36px;margin-top:-24px}.hero-stats{display:grid;grid-template-columns:repeat(4,auto);gap:0;margin:0;width:max-content;max-width:100%}.hero-stats>div{padding:0 32px;border-left:1px solid var(--line-2);display:flex;flex-direction:column-reverse;align-items:center;text-align:center}.hero-stats>div:first-child{border-left:0}.hero-stats dt{font-size:12px;color:var(--ink-3)}.hero-stats dd{margin:0 0 2px;font-size:30px;font-weight:500;letter-spacing:-.03em;font-family:var(--f-sans)}.hero-hint{margin:0;display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ink-3);letter-spacing:.02em;pointer-events:none}.hero-hint span{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-2);position:relative}.hero-hint span:after{content:"";position:absolute;top:50%;left:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:var(--accent);animation:hintDot 2.4s var(--ease) infinite}@keyframes hintDot{0%,to{transform:translate(-5px)}50%{transform:translate(5px)}}.hero3d-tip{position:absolute;left:0;top:0;z-index:5;pointer-events:none;display:flex;flex-direction:column;gap:1px;padding:10px 14px;border-radius:14px;background:#111113e6;color:#fff;font-size:13px;line-height:1.3;opacity:0;scale:.9;transition:opacity .25s,scale .35s var(--ease)}.hero3d-tip.is-on{opacity:1;scale:1}.hero3d-tip span{opacity:.6;font-size:12px}@media(max-width:900px){.hero{padding:120px 0 40px}.hero-canvas{height:400px}.hero-stats{grid-template-columns:repeat(2,auto);row-gap:20px}.hero-stats>div{padding:0 20px}.hero-stats>div:nth-child(3){border-left:0}}.sectors{padding:28px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff6}.sector-pill{display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 22px 0 8px;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);font-size:15px;font-weight:500;letter-spacing:-.01em;transition:box-shadow .4s var(--ease),transform .5s var(--ease-spring);white-space:nowrap}.sector-pill:hover{box-shadow:inset 0 0 0 1px var(--ink);transform:translateY(-2px)}.sector-pill .sw{display:flex}.sector-pill .sw i{width:36px;height:36px;border-radius:50%;box-shadow:0 0 0 2px var(--surface)}.sector-pill .sw i+i{margin-left:-14px}.sector-pill small{color:var(--ink-3);font-weight:400}.show-grid{display:grid;grid-template-columns:340px 1fr;gap:clamp(24px,4vw,56px);align-items:center}.show-controls{display:grid;gap:26px;padding:28px;border-radius:28px;background:var(--surface);box-shadow:var(--shadow-soft),inset 0 0 0 1px var(--line)}.ctrl-title{margin:0 0 12px;font-size:13px;font-weight:500;color:var(--ink-3);display:flex;justify-content:space-between;gap:8px}.ctrl-val{color:var(--ink)}.seg{display:flex;flex-wrap:wrap;gap:6px}.seg button{height:36px;padding:0 14px;border-radius:999px;font-size:13px;color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line);transition:all .3s var(--ease)}.seg button:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}.seg button[aria-pressed=true]{background:var(--ink);color:#fff;box-shadow:none}.swatches{display:flex;flex-wrap:wrap;gap:10px}.swatch{position:relative;width:44px;height:44px;border-radius:50%;padding:0;box-shadow:0 0 0 1px var(--line-2);transition:transform .5s var(--ease-spring),box-shadow .3s}.swatch:before{content:"";position:absolute;inset:4px;border-radius:50%;background:conic-gradient(from 200deg,var(--s1) 0 25%,var(--s2) 0 50%,var(--s3) 0 75%,var(--s4) 0);box-shadow:inset 0 0 0 1px #11111314}.swatch:hover{transform:translateY(-3px) scale(1.06)}.swatch[aria-pressed=true]{box-shadow:0 0 0 2px var(--ink)}.fonts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.font-btn{display:grid;gap:2px;justify-items:start;padding:12px;border-radius:16px;box-shadow:inset 0 0 0 1px var(--line);text-align:left;transition:all .3s var(--ease)}.font-btn b{font-size:26px;line-height:1;font-weight:500}.font-btn span{font-size:11px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.font-btn:hover{box-shadow:inset 0 0 0 1px var(--line-2)}.font-btn[aria-pressed=true]{box-shadow:inset 0 0 0 1.5px var(--ink);background:var(--bg)}.show-controls .btn{justify-self:start}.show-stage{position:relative;perspective:2200px}.device{position:relative;z-index:1;border-radius:20px;overflow:hidden;background:var(--surface);box-shadow:0 0 0 1px #11111314,0 40px 80px -30px #11111359,0 90px 140px -80px #2b45ff47;transform:rotateY(-9deg) rotateX(5deg) rotate(.4deg);transform-origin:60% 50%;transition:transform 1.2s var(--ease)}.show-stage:hover .device{transform:rotateY(-2deg) rotateX(1.5deg)}.device-bar{display:flex;align-items:center;gap:7px;height:40px;padding:0 16px;background:#f2f1ed;border-bottom:1px solid var(--line)}.device-bar i{width:10px;height:10px;border-radius:50%;background:#dddbd4}.device-bar span{margin:0 auto;transform:translate(-24px);padding:4px 16px;border-radius:8px;background:#fff;font-size:12px;color:var(--ink-3);min-width:40%;text-align:center}.device-screen{position:relative;aspect-ratio:16 / 10;overflow:hidden;background:var(--bg-2)}.device-screen iframe{position:absolute;left:0;top:0;width:1440px;height:900px;border:0;transform-origin:0 0;background:#fff}.device-screen:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.18),transparent 40%)}.device-shadow{position:absolute;left:8%;right:8%;bottom:-60px;height:60px;background:radial-gradient(50% 50% at 50% 50%,rgba(17,17,19,.18),transparent);filter:blur(10px)}.device-screen.is-loading:before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(100deg,var(--bg-2) 30%,#f7f6f2 50%,var(--bg-2) 70%);background-size:200% 100%;animation:shimmer 1.4s linear infinite}@keyframes shimmer{to{background-position:-200% 0}}@media(max-width:1000px){.show-grid{grid-template-columns:1fr}.show-stage{order:-1}.device{transform:none}}.rows{overflow:hidden}.rows-marquee{padding:24px 0}.tcard{flex:0 0 auto;width:clamp(280px,30vw,440px);display:block}.tcard .shell{border-radius:24px;padding:5px}.tcard .core{border-radius:19px}.tthumb{position:relative;aspect-ratio:16 / 10;overflow:hidden;background:var(--bg-2)}.tthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 1.2s var(--ease)}.tcard:hover .tthumb img{transform:scale(1.04)}.tmeta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 6px 4px}.tmeta b{font-size:16px;font-weight:600;letter-spacing:-.02em}.tmeta span{font-size:13px;color:var(--ink-3)}.tmeta .dots{display:flex;gap:4px}.tmeta .dots i{width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1px #1111131a}.how-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(32px,6vw,96px);align-items:start}.how-sticky{position:sticky;top:120px}.steps{list-style:none;margin:0;padding:0;display:grid;gap:20px;counter-reset:s}.step{position:relative;display:grid;grid-template-columns:64px 1fr;gap:8px 20px;align-items:start;padding:28px;border-radius:28px;background:var(--surface);box-shadow:var(--shadow-soft),inset 0 0 0 1px var(--line);transition:transform .8s var(--ease-spring),box-shadow .6s var(--ease)}.step:hover{transform:translateY(-4px) rotate(-.4deg);box-shadow:var(--shadow-lift),inset 0 0 0 1px var(--line)}.step:nth-child(2n):hover{transform:translateY(-4px) rotate(.4deg)}.step-num{font-size:13px;color:var(--accent);padding-top:6px}.step-body p{margin:8px 0 0;color:var(--ink-2)}.step-art{grid-column:2;margin-top:18px;height:96px;border-radius:18px;background:var(--bg);position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}.art-pick{display:flex;align-items:flex-end;justify-content:center;gap:10px;padding-top:18px}.art-pick span{width:28%;height:76px;border-radius:10px 10px 0 0;background:var(--surface);box-shadow:0 0 0 1px var(--line),0 10px 20px -12px #1111134d;transition:transform .8s var(--ease-spring)}.art-pick span:nth-child(2){height:86px;background:var(--ink)}.step:hover .art-pick span:nth-child(1){transform:translateY(6px) rotate(-4deg)}.step:hover .art-pick span:nth-child(3){transform:translateY(6px) rotate(4deg)}.art-tune{display:flex;align-items:center;gap:10px;padding:0 22px}.art-tune i{width:34px;height:34px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px var(--surface),0 0 0 4px var(--line);transition:transform .6s var(--ease-spring)}.step:hover .art-tune i:nth-child(1){transform:translateY(-8px)}.step:hover .art-tune i:nth-child(2){transform:translateY(-4px);transition-delay:.05s}.art-tune b{margin-left:auto;font-family:var(--f-serif);font-style:italic;font-weight:400;font-size:52px;line-height:1}.art-pin .line{position:absolute;left:22px;top:26px;width:60%;height:10px;border-radius:6px;background:#1111131a}.art-pin .line.s{top:46px;width:38%}.art-pin .pin{position:absolute;left:58%;top:18px;width:28px;height:28px;border-radius:50% 50% 50% 4px;background:var(--warm);color:#fff;font-size:12px;font-weight:600;display:grid;place-items:center;box-shadow:0 0 0 3px var(--surface),0 8px 16px -6px #ff6a3db3}.art-pin .note{position:absolute;left:calc(58% + 36px);top:18px;padding:6px 10px;border-radius:10px;background:var(--ink);color:#fff;font-size:12px;white-space:nowrap;transform-origin:left center;transition:transform .6s var(--ease-spring)}.step:hover .art-pin .note{transform:scale(1.06)}.art-live{display:flex;align-items:center;justify-content:center;gap:10px;font-weight:500;font-size:15px}.art-live .dot{width:10px;height:10px;border-radius:50%;background:var(--ok);box-shadow:0 0 #138a5280;animation:live 2s infinite}@keyframes live{70%{box-shadow:0 0 0 12px #138a5200}to{box-shadow:0 0 #138a5200}}@media(max-width:900px){.how-grid{grid-template-columns:1fr}.how-sticky{position:static}.step{grid-template-columns:1fr;padding:22px}.step-art{grid-column:1}}.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}.bento>*{min-width:0}.b-art{overflow:hidden}.b{grid-column:span 3}.b-color{grid-column:span 4}.b-type{grid-column:span 2}.b .core{height:100%;display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:28px;min-height:300px}.b-text p{margin:8px 0 0;color:var(--ink-2);font-size:15px;max-width:30em}.b-art{position:relative;min-height:130px}.palettes-art{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;align-items:end}.pal-col{display:grid;gap:4px;padding:6px;border-radius:16px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);transition:transform .7s var(--ease-spring)}.pal-col i{height:22px;border-radius:8px}.pal-col i:first-child{height:58px}.pal-col:hover{transform:translateY(-8px)}.type-art{display:flex;align-items:flex-end;gap:14px}.type-art span{font-size:76px;line-height:.9;letter-spacing:-.04em}.type-art .t1{font-weight:700}.type-art .t2{color:var(--accent)}.type-art .t3{font-family:var(--f-mono);font-size:56px;color:var(--ink-3)}.edit-art{display:grid;gap:8px;align-content:end}.edit-line{font-size:32px;font-weight:600;letter-spacing:-.03em;outline:2px dashed var(--accent);outline-offset:6px;border-radius:4px;justify-self:start}.caret{display:inline-block;width:2px;height:30px;background:var(--accent);margin-left:3px;vertical-align:-4px;animation:caret 1s steps(1) infinite}@keyframes caret{50%{opacity:0}}.edit-sub{color:var(--ink-3);margin-top:10px}.pin-art .mock{display:grid;gap:8px;padding:18px;border-radius:16px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}.pin-art .mock span{height:10px;border-radius:6px;background:#1111131a;width:70%}.pin-art .mock .w{height:44px;width:100%;background:#1111130f}.pin-art b{position:absolute;width:28px;height:28px;border-radius:50% 50% 50% 4px;background:var(--warm);color:#fff;font-size:12px;display:grid;place-items:center;box-shadow:0 0 0 3px var(--surface),0 8px 16px -6px #ff6a3db3}.pin-art .p1{left:62%;top:4px}.pin-art .p2{left:20%;top:64px}.pin-art em{position:absolute;left:calc(62% + 36px);top:4px;font-style:normal;font-size:12px;background:var(--ink);color:#fff;padding:6px 10px;border-radius:10px;white-space:nowrap}.toggles-art{display:grid;gap:8px;align-content:end}.toggles-art label{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-radius:14px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);font-size:14px}.toggles-art i{width:34px;height:20px;border-radius:999px;background:#11111326;position:relative;transition:background .4s}.toggles-art i:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;transition:transform .5s var(--ease-spring)}.toggles-art i.on{background:var(--accent)}.toggles-art i.on:after{transform:translate(14px)}.device-art{display:flex;align-items:flex-end;justify-content:center;gap:12px}.device-art span{border-radius:10px;background:var(--bg);box-shadow:inset 0 0 0 2px var(--ink);position:relative}.device-art span:after{content:"";position:absolute;inset:8px;border-radius:4px;background:linear-gradient(var(--accent) 0 30%,rgba(17,17,19,.08) 30% 42%,transparent 42% 50%,rgba(17,17,19,.08) 50% 58%,transparent 58%)}.device-art .d1{width:180px;height:116px}.device-art .d2{width:82px;height:110px}.device-art .d3{width:48px;height:92px;border-radius:12px}@media(max-width:900px){.bento{grid-template-columns:minmax(0,1fr)}.hero-copy .display br{display:none}.pin-art em{left:auto;right:0;top:40px}.b,.b-color,.b-type{grid-column:auto}.palettes-art{grid-template-columns:repeat(5,1fr)}.type-art span{font-size:60px}}.inc-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(32px,6vw,96px)}.inc-list{list-style:none;margin:0;padding:0}.inc-list li{display:grid;grid-template-columns:56px 1fr;gap:16px;padding:26px 0;border-top:1px solid var(--line-2)}.inc-list li:last-child{border-bottom:1px solid var(--line-2)}.inc-list .num{font-size:13px;color:var(--ink-3);padding-top:4px}.inc-list h3{margin:0;font-size:20px;font-weight:500;letter-spacing:-.02em}.inc-list p{margin:6px 0 0;color:var(--ink-2)}@media(max-width:900px){.inc-grid{grid-template-columns:1fr}}.faq-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(32px,6vw,96px)}.faq-item{border-top:1px solid var(--line-2)}.faq-item:last-child{border-bottom:1px solid var(--line-2)}.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0;text-align:left;font-size:18px;font-weight:500;letter-spacing:-.015em}.faq-q .pm{flex-shrink:0;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line-2);transition:transform .6s var(--ease-spring),background .3s,color .3s}.faq-q .pm svg{width:14px;height:14px}.faq-item.is-open .pm{transform:rotate(45deg);background:var(--ink);color:#fff;box-shadow:none}.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}.faq-a>div{overflow:hidden}.faq-a p{margin:0 0 24px;color:var(--ink-2);max-width:40em}.faq-item.is-open .faq-a{grid-template-rows:1fr}@media(max-width:900px){.faq-grid{grid-template-columns:1fr}}.cta{padding:0 0 clamp(80px,10vw,140px)}.cta-card{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;min-height:520px;padding:clamp(32px,6vw,80px);border-radius:40px;background:var(--accent);color:#fff;box-shadow:0 40px 100px -40px #2b45ff99}.cta-card:before{content:"";position:absolute;inset:0;background-image:linear-gradient(to right,rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.08) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:linear-gradient(90deg,transparent,#000);mask-image:linear-gradient(90deg,transparent,#000);pointer-events:none}.cta-copy{position:relative;grid-column:2}.cta-copy p{color:#ffffffc7;font-size:18px;margin:20px 0 0;max-width:28em}.cta .btn-accent{background:#fff;color:var(--ink);box-shadow:0 16px 40px -16px #0006}.cta .btn-accent .ic{background:var(--accent-soft);color:var(--accent)}.cta .btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px #fff6}.cta .btn-ghost:hover{box-shadow:inset 0 0 0 1px #fff}.cta-stack{position:relative;grid-column:1;grid-row:1;height:380px;perspective:1600px}.cta-stack .sc{position:absolute;left:50%;top:50%;width:78%;aspect-ratio:16 / 10;margin-left:-39%;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 30px 60px -20px #00000073,0 0 0 1px #fff3;transform-style:preserve-3d;transform:translate3d(calc(var(--i) * 26px - 30px),calc(-50% + var(--i) * -30px),calc(var(--i) * -60px)) rotateY(24deg) rotateX(10deg) rotate(-6deg);transition:transform 1.1s var(--ease)}.cta-card:hover .cta-stack .sc{transform:translate3d(calc(var(--i) * 70px - 80px),calc(-50% + var(--i) * -44px),calc(var(--i) * -90px)) rotateY(18deg) rotateX(8deg) rotate(-4deg)}.cta-stack .sc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}@media(max-width:900px){.cta-card{grid-template-columns:1fr;border-radius:28px}.cta-copy{grid-column:1}.cta-stack{height:240px}}
