.web-creation h1,.web-creation h2,.web-creation h3{letter-spacing:0}.web-creation{--web-line:var(--hairline)}.web-hero-figure{margin-top:2.5rem;padding:0 10% 2rem 0;position:relative}.web-hero-desktop{width:92%}.web-browser{border:1px solid var(--hairline);background:var(--card);box-shadow:var(--shadow-lift);border-radius:8px;overflow:hidden}.web-browser-bar{background:var(--surface);height:30px;color:var(--muted-foreground);border-bottom:1px solid var(--hairline);justify-content:space-between;align-items:center;padding:0 14px;font-size:9px;display:flex}.web-browser-dots{gap:4px;display:flex}.web-browser-dots i{background:var(--hairline);border-radius:50%;width:5px;height:5px}.studio-screen{background:var(--card);color:var(--card-foreground)}.studio-nav{justify-content:space-between;align-items:center;padding:17px 5%;font-size:12px;display:flex}.studio-links{gap:22px;font-size:9px;display:flex}.studio-links span{align-items:center;gap:4px;display:flex}.studio-visual{aspect-ratio:2.8;background:var(--surface);position:relative;overflow:hidden}.studio-visual img{object-fit:cover;object-position:50% 58%;width:100%;height:100%}.studio-copy{width:47%;color:var(--secondary-foreground);position:absolute;inset:16% auto auto 5%}.studio-kicker{font-size:9px}.studio-copy p{margin:10px 0 17px;font-size:32px;font-weight:500;line-height:1.1}.studio-action{border-bottom:1px solid;align-items:center;gap:10px;padding-bottom:5px;font-size:9px;display:inline-flex}.studio-bottom{justify-content:space-between;padding:17px 5%;font-size:10px;display:flex}.studio-bottom span:last-child{align-items:center;gap:8px;display:flex}.web-phone{background:var(--navy);border:1px solid var(--navy);width:20%;max-width:205px;box-shadow:var(--shadow-lift);border-radius:24px;padding:7px;position:absolute;bottom:2.5rem;right:2%}.web-phone-speaker{background:var(--navy);z-index:1;border-radius:8px;width:24%;height:6px;position:absolute;top:12px;left:38%}.web-phone .studio-screen{border-radius:17px;overflow:hidden}.studio-mobile .studio-nav{padding:22px 9px 12px;font-size:9px}.studio-mobile .studio-links{display:none}.studio-mobile .studio-visual{aspect-ratio:.72}.studio-mobile .studio-visual img{object-position:75% bottom}.studio-mobile .studio-copy{width:84%;inset:8% 8% auto}.studio-mobile .studio-kicker{font-size:7px}.studio-mobile .studio-copy p{margin:10px 0;font-size:23px}.studio-mobile .studio-action{font-size:7px}.studio-mobile .studio-bottom{padding:12px 8%;font-size:7px;display:block}.studio-mobile .studio-bottom span:last-child{margin-top:9px}.web-hero-figure figcaption{color:var(--muted-foreground);font-size:10px;position:absolute;bottom:0;left:0}.web-path-visual{background:var(--surface);border-bottom:1px solid var(--hairline);height:245px;margin-bottom:24px;position:relative;overflow:hidden}.web-path-visual figcaption{color:var(--muted-foreground);font-size:9px;position:absolute;bottom:12px;left:18px}.web-create .web-browser{width:91%;margin:24px auto 0}.studio-compact .studio-nav{padding:10px 5%;font-size:8px}.studio-compact .studio-links{gap:8px;font-size:6px}.studio-compact .studio-visual{aspect-ratio:1.9}.studio-compact .studio-kicker{font-size:6px}.studio-compact .studio-copy p{margin:8px 0;font-size:21px}.studio-compact .studio-action{font-size:6px}.studio-compact .studio-bottom{padding:10px 5%;font-size:7px}.web-redesign{justify-content:center;align-items:flex-start;gap:16px;padding:18px 24px;display:flex}.web-before{border:1px solid var(--hairline);background:var(--card);width:45%;margin-top:12px;padding:12px}.web-after{width:45%}.web-after .studio-screen{border:1px solid var(--hairline);box-shadow:var(--shadow-soft)}.web-after .studio-mobile .studio-visual{aspect-ratio:.85}.web-after .studio-mobile .studio-copy p{font-size:16px}.web-after .studio-mobile .studio-kicker,.web-after .studio-action,.web-after .studio-bottom{display:none}.web-optimize{padding:28px}.web-product-detail{background:var(--card);border:1px solid var(--hairline);flex-direction:column;gap:9px;width:66%;padding:10px;display:flex}.web-product-detail img{aspect-ratio:2;object-fit:cover;width:100%}.web-next-step{border:1px solid var(--primary);background:var(--card);box-shadow:var(--shadow-soft);padding:16px;position:absolute;bottom:48px;right:20px}.web-journey-line{border-right:1px solid var(--primary);border-bottom:1px solid var(--primary);width:60%;height:50%;position:absolute;top:25%;right:14%}.web-framework{grid-template-columns:1fr 1.25fr 1fr;align-items:center;gap:24px;display:grid}.web-framework-node{border-top:1px solid var(--navy-foreground);padding:18px 0}.web-framework-center{text-align:center;border:1px solid var(--navy-muted);padding:32px 18px;position:relative}.web-framework-center:before,.web-framework-center:after{content:"";background:var(--navy-muted);width:24px;height:1px;position:absolute;top:50%}.web-framework-center:before{left:-25px}.web-framework-center:after{right:-25px}.web-process{grid-template-columns:repeat(6,1fr);gap:24px;display:grid}.web-process li{border-top:1px solid var(--hairline);padding-top:24px;position:relative}.web-process li:before{content:"";background:var(--primary);border-radius:50%;width:7px;height:7px;position:absolute;top:-4px;left:0}@media (width>=1280px){.studio-copy p{font-size:42px}.studio-visual{aspect-ratio:3.2}}@media (width<=767px){.web-hero-figure{margin-top:2rem;padding:0 0 2rem}.web-hero-desktop{width:94%}.web-browser-bar{height:22px;padding-inline:8px;font-size:7px}.studio-nav{padding:10px 5%;font-size:9px}.studio-links{gap:9px;font-size:6px}.studio-visual{aspect-ratio:1.65}.studio-copy{top:15%}.studio-copy p{margin:8px 0 12px;font-size:23px}.studio-kicker,.studio-action{font-size:7px}.studio-bottom{padding-block:10px;font-size:7px}.web-phone{border-radius:15px;width:28%;padding:4px;bottom:3rem;right:-2px}.web-phone .studio-screen{border-radius:11px}.web-phone-speaker{height:4px;top:8px}.web-phone .studio-mobile .studio-nav{padding:14px 5px 6px;font-size:6px}.web-phone .studio-mobile .studio-copy p{font-size:14px}.web-phone .studio-mobile .studio-kicker{display:none}.web-phone .studio-mobile .studio-action{font-size:5px}.web-phone .studio-mobile .studio-bottom{padding:8px 6px;font-size:5px}.web-phone .studio-mobile svg{width:8px}.web-hero-figure figcaption{max-width:100%;font-size:9px}.web-framework{grid-template-columns:1fr 1fr;gap:18px}.web-framework-center{grid-area:2/1/auto/-1;padding:24px}.web-framework-center:before,.web-framework-center:after{display:none}.web-process{grid-template-columns:1fr;gap:0}.web-process li{border-top:0;border-left:1px solid var(--hairline);padding:0 0 28px 28px}.web-process li:before{top:9px;left:-4px}.web-process li:last-child{padding-bottom:0}}
