.showcase-section{padding:100px 0;transition:background-color .5s cubic-bezier(.22,1,.36,1);position:relative}.showcase-section.showcase-section--light{background:var(--background-neutral-white)}.showcase-section.showcase-section--light .showcase-header .codio-large-title{color:var(--text-secondary-600)}.showcase-section.showcase-section--light .showcase-header .codio-section-desc{color:var(--text-secondary-100)}.showcase-section.showcase-section--light .showcase-side p{color:var(--text-neutral-500)}.showcase-section.showcase-section--light .showcase-feature-title,.showcase-section.showcase-section--light .showcase-feature-subtitle{color:var(--text-secondary-600)}.showcase-section.showcase-section--light .showcase-feature-description{color:var(--text-neutral-500)}.showcase-section.showcase-section--dark{background:var(--background-neutral-black)}.showcase-section.showcase-section--dark .showcase-header .codio-large-title{color:var(--text-neutral-white)}.showcase-section.showcase-section--dark .showcase-header .codio-section-desc,.showcase-section.showcase-section--dark .showcase-side p{color:var(--text-neutral-400)}.showcase-section.showcase-section--dark .showcase-feature-title,.showcase-section.showcase-section--dark .showcase-feature-subtitle{color:var(--text-neutral-white)}.showcase-section.showcase-section--dark .showcase-feature-description{color:var(--text-neutral-400)}.showcase-section .showcase-header{text-align:center;flex-direction:column;align-items:center;gap:22px;max-width:550px;margin:0 auto 80px;display:flex}.showcase-section .showcase-button{margin-top:14px}.showcase-section .showcase-subtitle{font-family:var(--font-general-sans);letter-spacing:0;color:var(--text-secondary-100);font-size:16px;font-weight:500;line-height:normal}.showcase-section .showcase-stage{grid-template-columns:258px minmax(320px,514px) 224px;justify-content:space-between;align-items:start;gap:56px;display:grid}.showcase-section .showcase-side{flex-direction:column;padding-top:58px;display:flex}.showcase-section .showcase-side p{font-family:var(--font-general-sans);letter-spacing:0;margin:0;font-size:16px;font-weight:400;line-height:normal}.showcase-section .showcase-side--left{gap:24px}.showcase-section .showcase-side--right{justify-content:space-between;gap:32px;height:100%;padding-top:0}.showcase-section .showcase-feature-title{font-family:var(--font-general-sans);letter-spacing:0;margin:0;font-size:30px;font-weight:500;line-height:normal}.showcase-section .showcase-feature-subtitle{font-family:var(--font-general-sans);letter-spacing:0;margin:0;font-size:20px;font-weight:500;line-height:normal}.showcase-section .showcase-feature-description{font-family:var(--font-general-sans);letter-spacing:0;margin:0;font-size:16px;font-weight:400;line-height:normal}.showcase-section .showcase-nav-wrap{margin-top:16px}.showcase-section .showcase-nav{justify-content:flex-start}.showcase-section .showcase-visual{flex-direction:column;align-items:center;gap:20px;display:flex;position:relative}.showcase-section .showcase-visual-image{background:linear-gradient(3deg,#f9f9f9 -26.78%,#dbdbdb 165.95%);border-radius:20px;width:100%;height:436px;position:relative;overflow:hidden}.showcase-section .showcase-visual-image__inner{cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;position:absolute;inset:0}.showcase-section .showcase-visual-image__inner:active{cursor:grabbing}.showcase-section .showcase-visual-image__inner img{object-fit:contain;object-position:bottom center;pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;padding:10px 10px 0}.showcase-section .showcase-visual-dots{align-items:center;gap:4px;display:flex}.showcase-section .showcase-visual-dot{background:var(--background-neutral-450,#9999991f);cursor:pointer;border:none;border-radius:30px;width:11px;height:6px;padding:0;transition:width .3s cubic-bezier(.22,1,.36,1),background-color .3s}.showcase-section .showcase-visual-dot:hover{background:var(--background-neutral-300,#e0e0e0)}.showcase-section .showcase-visual-dot.is-active{background:var(--background-neutral-300,#e0e0e0);width:16px}@media screen and (max-width:1350px){.showcase-section{padding:90px 0}.showcase-section .showcase-header{margin:0 auto 60px}.showcase-section .showcase-stage{grid-template-columns:220px minmax(320px,460px) 200px;gap:40px}.showcase-section .showcase-visual-image{height:400px}}@media screen and (max-width:991px){.showcase-section{padding:80px 0}.showcase-section .showcase-header{margin:0 auto 50px}.showcase-section .showcase-stage{text-align:center;grid-template-columns:1fr;gap:24px;max-width:620px;margin:0 auto}.showcase-section .showcase-side{align-items:center;padding-top:0}.showcase-section .showcase-side--left{order:1;gap:16px}.showcase-section .showcase-side--right{order:3;align-items:stretch;gap:14px}.showcase-section .showcase-side--right p:nth-child(odd){text-align:left}.showcase-section .showcase-side--right p:nth-child(2n){text-align:right}.showcase-section .showcase-feature-title,.showcase-section .showcase-feature-description{text-align:center}.showcase-section .showcase-nav-wrap{justify-content:center;margin-top:8px;display:flex}.showcase-section .showcase-nav{justify-content:center}.showcase-section .showcase-visual{order:2;gap:16px}.showcase-section .showcase-visual-image{aspect-ratio:16/11;height:auto}}@media screen and (max-width:767px){.showcase-section{padding:60px 0}.showcase-section .showcase-header{gap:10px;margin-bottom:36px}.showcase-section .showcase-header .codio-large-title{font-family:var(--font-general-sans);letter-spacing:0;font-size:24px;font-weight:500;line-height:normal}.showcase-section .showcase-header .codio-section-desc{font-family:var(--font-general-sans);letter-spacing:0;max-width:292px;font-size:14px;font-weight:400;line-height:normal}.showcase-section .showcase-stage{gap:16px}.showcase-section .showcase-side p{font-family:var(--font-general-sans);letter-spacing:0;font-size:14px;font-weight:400;line-height:normal}.showcase-section .showcase-side--right{gap:24px}.showcase-section .showcase-feature-title{font-family:var(--font-general-sans);letter-spacing:0;font-size:20px;font-weight:500;line-height:normal}.showcase-section .showcase-feature-description{font-family:var(--font-general-sans);letter-spacing:0;max-width:292px;font-size:14px;font-weight:400;line-height:normal}.showcase-section .showcase-visual-image{aspect-ratio:16/11;border-radius:18px}}
