.web-intro-hero{padding:76px 0 62px;border-bottom:1px solid var(--line)}
.web-hero-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:28px 54px;align-items:center}
.web-hero-copy .eyebrow{font-size:10px;letter-spacing:1.8px}
.web-hero-copy h1{font-size:clamp(32px,3.7vw,49px);font-weight:500;letter-spacing:.01em;line-height:1.5;margin:28px 0 22px}
.web-hero-copy h1>span{display:block;white-space:nowrap}
.web-hero-copy h1>span:last-child{color:var(--purple)}
.web-hero-copy p{font-size:16px;line-height:2;margin:0}
.web-hero-tags{font-size:10px;color:var(--muted);margin-top:22px}
.web-hero-actions{display:flex;gap:26px;align-items:center;grid-column:1;margin-top:0}
.web-hero-actions .btn{font-size:12px;padding:15px 21px;gap:30px;border-radius:5px}
.web-hero-actions .text-link{font-size:12px;white-space:nowrap}
.web-demo{grid-column:2;grid-row:1 / 3;min-width:0;background:#fdeff3;border-radius:14px;overflow:hidden}
.web-demo-art{height:370px;position:relative;background:radial-gradient(ellipse at 70% 45%,#fae1e888,transparent 70%)}
.demo-browser{position:absolute;left:7%;top:12%;width:81%;height:73%;background:#fff;border:1px solid #fadce5;border-radius:8px;box-shadow:0 18px 30px #5b444b12;animation:browser-float 7s ease-in-out infinite}
.demo-toolbar{height:27px;border-bottom:1px solid #fdeff3;display:flex;align-items:center;gap:4px;padding:0 11px}
.demo-toolbar i{width:4px;height:4px;background:#f3afc3;border-radius:50%}
.demo-toolbar span{font-size:6px;color:#de5c83;letter-spacing:1px;text-align:center;flex:1}
.demo-nav{display:flex;justify-content:space-between;padding:12px 16px;align-items:center}
.demo-nav b{font-size:9px;letter-spacing:-.3px}.demo-nav>span{font-size:4px;letter-spacing:1px;color:#de6086}
.demo-site-hero{display:flex;gap:15px;padding:14px 20px 16px;background:#fef7f9;align-items:center}
.demo-site-hero>div:first-child{flex:1;min-width:0}.demo-site-hero small{font-size:4px;letter-spacing:1px;color:#e0698d}
.demo-site-hero strong{font-size:25px;line-height:1.15;letter-spacing:-1px;display:block;font-weight:500;margin-top:10px}
.demo-cta{display:inline-block;background:#d63666;color:#fff;font-size:5px;border-radius:2px;padding:5px 10px;margin-top:12px}
.demo-orbit{width:95px;height:95px;flex-shrink:0}.demo-orbit svg{width:100%;height:100%}
.demo-rows{display:flex;gap:10px;padding:14px 20px}.demo-rows>div{flex:1;animation:layout-glow 6s ease-in-out infinite}.demo-rows>div:nth-child(2){animation-delay:.3s}.demo-rows>div:nth-child(3){animation-delay:.6s}
.demo-rows i{display:block;height:22px;background:#fdeff3;border-radius:2px}.demo-rows b,.demo-rows span{display:block;height:3px;margin-top:5px;background:#f8d0dc;width:55%}.demo-rows span{width:85%;background:#fdeff3}
.demo-phone{position:absolute;right:4%;top:28%;width:20%;height:61%;background:#fefafb;border:4px solid #3b2e32;border-radius:15px;box-shadow:0 10px 23px #3c2a2f20;padding:8px 7px;animation:phone-float 7s ease-in-out infinite}
.phone-speaker{width:18px;height:3px;margin:-3px auto 8px;background:#3b2e32;border-radius:3px}.phone-brand{font-size:5px;font-weight:600}.phone-picture{height:60px;background:linear-gradient(140deg,#fadbe4,#dc567e);margin:8px 0;border-radius:2px}.demo-phone strong{font-size:10px;letter-spacing:-.4px}.phone-line{height:3px;background:#f8d0dc;margin-top:7px}.phone-line.short{width:70%;margin-top:4px}.phone-button{height:10px;width:55%;background:#d63666;margin-top:10px;border-radius:2px}.phone-bottom{height:32px;background:#fdeff3;margin-top:12px}
.demo-shop{position:absolute;left:2%;bottom:3%;width:48%;background:#d63666;border-radius:5px;color:#fff;padding:12px 14px;box-shadow:0 10px 25px #49353b18;animation:shop-float 7s ease-in-out infinite}
.shop-heading{font-size:6px;letter-spacing:1.3px;display:flex;justify-content:space-between;margin-bottom:9px}.shop-heading span{font-size:12px;line-height:1}
.shop-items{display:flex;gap:8px}.shop-items>div{flex:1}.shop-items i{display:block;height:37px;background:#fadbe4;border-radius:2px;position:relative}.shop-items i:after{content:'';position:absolute;inset:9px 12px;border:2px solid #e47c9b;border-radius:50%}.shop-items span{display:block;width:70%;height:2px;background:#f6c3d2;margin-top:5px}
.demo-cursor{position:absolute;width:25px;height:30px;top:57%;left:39%;filter:drop-shadow(0 2px 2px #5c474d22);animation:cursor-travel 7s ease-in-out infinite}
.demo-badge{position:absolute;right:9%;top:5%;font-size:6px;letter-spacing:1.5px;color:#dd5880}
.web-demo-foot{display:flex;justify-content:space-between;align-items:center;padding:12px 17px;color:#d94773;font-size:9px;border-top:1px solid #fadbe4}
.web-motion-toggle{background:transparent;border:0;color:#d63666;font-size:10px;padding:4px 6px;cursor:pointer}
.web-demo.is-paused *{animation-play-state:paused!important}
@keyframes browser-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes phone-float{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@keyframes shop-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes layout-glow{0%,20%,70%,100%{opacity:1}40%{opacity:.45}}
@keyframes cursor-travel{0%,20%,100%{transform:translate(0,0)}45%,65%{transform:translate(75px,-55px)}80%{transform:translate(15px,20px)}}
@media(max-width:1000px){.web-hero-grid{gap:25px}.web-hero-copy h1{font-size:35px}.web-hero-actions{flex-wrap:wrap;gap:15px}.demo-site-hero strong{font-size:20px}.demo-orbit{width:70px;height:70px}.web-demo-art{height:330px}.demo-site-hero{padding:12px 16px}.demo-browser{height:76%}}
@media(max-width:760px){.web-intro-hero{padding:30px 0 36px}.web-hero-grid{display:flex;flex-direction:column;align-items:stretch;gap:0}.web-hero-copy .eyebrow{font-size:8px;letter-spacing:1.4px}.web-hero-copy h1{font-size:clamp(27px,8vw,36px);line-height:1.45;margin:18px 0 14px}.web-hero-copy p{font-size:12px;line-height:1.9}.web-hero-tags{font-size:8px;margin-top:13px}.web-demo{margin-top:24px;border-radius:9px}.web-demo-art{height:225px}.demo-browser{top:9%;left:7%;height:77%;border-radius:5px}.demo-toolbar{height:18px;padding:0 8px}.demo-toolbar span{font-size:4px}.demo-nav{padding:7px 12px}.demo-nav b{font-size:7px}.demo-nav>span{font-size:3px}.demo-site-hero{padding:9px 13px;gap:6px}.demo-site-hero small{font-size:3px}.demo-site-hero strong{font-size:19px;margin-top:5px}.demo-cta{font-size:4px;padding:3px 7px;margin-top:8px}.demo-orbit{width:65px;height:65px}.demo-rows{padding:9px 13px;gap:7px}.demo-rows i{height:16px}.demo-rows b,.demo-rows span{height:2px;margin-top:4px}.demo-phone{border-width:3px;border-radius:11px;top:24%;height:65%;padding:6px 5px}.phone-speaker{margin:-2px auto 5px;width:14px;height:2px}.phone-brand{font-size:4px}.phone-picture{height:40px;margin:5px 0}.demo-phone strong{font-size:7px}.phone-line{height:2px;margin-top:5px}.phone-button{height:7px;margin-top:6px}.phone-bottom{height:22px;margin-top:8px}.demo-shop{padding:8px 10px;bottom:3%;width:46%}.shop-heading{font-size:4px;margin-bottom:6px}.shop-heading span{font-size:9px}.shop-items{gap:5px}.shop-items i{height:24px}.shop-items i:after{inset:5px 8px;border-width:1px}.demo-cursor{width:17px;height:22px}.demo-badge{font-size:4px;top:3%}.web-demo-foot{padding:8px 12px;font-size:8px}.web-motion-toggle{font-size:9px}.web-hero-actions{flex-wrap:nowrap;justify-content:space-between;margin-top:23px;gap:12px}.web-hero-actions .btn{font-size:11px;padding:12px 16px;gap:20px}.web-hero-actions .text-link{font-size:10px}}
@media(prefers-reduced-motion:reduce){.web-demo *{animation:none!important}.web-motion-toggle{display:none}}

/* Compact AI support introduction alongside the shop project. */
.work-ai-note{margin-top:22px;padding:20px 22px;background:#fdeff3;border-left:2px solid #df6489;border-radius:0 12px 12px 0}
.work-ai-label{display:block;font-size:10px;font-weight:500;letter-spacing:.08em;color:#d63666;margin-bottom:10px}
.work-ai-note h4{font-size:18px;font-weight:500;line-height:1.5;letter-spacing:0;margin:0 0 10px;text-wrap:balance}
.work-ai-note p{font-size:12px;line-height:1.9;color:#695e61;margin:0}
.work-ai-note small{display:block;font-size:10px;line-height:1.8;color:#84777a;margin-top:10px}
.work-ai-note a{display:inline-block;font-size:11px;line-height:1.6;color:#cf2a5c;text-decoration:underline;text-underline-offset:4px;padding:12px 0 3px}
.work-ai-note a:focus-visible{outline:2px solid #d63666;outline-offset:4px}
@media(max-width:760px){.work-ai-note{padding:18px;margin-top:18px}.work-ai-note h4{font-size:17px}.work-ai-note p{font-size:12px}}