.showcase .eyeline{font: 500 10px "IBM Plex Mono", monospace; letter-spacing: 0.13em; display: block;}
.showcase{height: 155vh; min-height: 1000px; position: relative; background: radial-gradient(at 50% 65%, rgb(215, 229, 213), transparent 55%), rgb(242, 244, 237);}
.showcase-pin{height: 100svh; min-height: 730px; position: sticky; top: 0px; display: flex; align-items: center; flex-direction: column; padding: 120px 5vw 25px; overflow: hidden;}
.showcase-copy{text-align: center; z-index: 3; position: relative; transform: translateY(calc(var(--hero-progress,0) * -60px)); opacity: calc(1 - var(--hero-progress,0) * .85);}
.showcase h1{font-family: Sora, sans-serif; font-size: clamp(45px, 5.4vw, 82px); line-height: 1.06; letter-spacing: -0.065em; margin: 22px 0px 20px; font-weight: 600;}
.showcase h1 em{font-style: normal; color: var(--green);}
.showcase-copy p{color: rgb(97, 107, 99); font-size: 15px; line-height: 1.7;}
.showcase .actions{display: flex; gap: 25px; align-items: center; justify-content: center; margin-top: 25px;}
.showcase .pill{border-radius: 30px; padding: 14px 23px; display: inline-flex; gap: 25px; font-size: 13px; background: var(--green); color: white;}
.showcase .pill:hover{background: rgb(0, 111, 57);}
.showcase .text-link{font-size: 13px; border-bottom: 1px solid rgb(132, 151, 136); padding-bottom: 5px;}
.showcase .device-scene{position: relative; width: min(920px, 90vw); height: 340px; margin-top: 32px; flex-shrink: 0; transform: translateY(calc(var(--hero-progress,0) * -35px)) scale(calc(1 + var(--hero-progress,0) * .14)); transform-origin: center top;}
.showcase .workstation{position: absolute; width: 61%; left: 19.5%; top: 0px; perspective: 1100px;}
.showcase .device-lid{padding: 10px; background: linear-gradient(130deg, rgb(102, 117, 106), rgb(18, 28, 23) 35%, rgb(52, 63, 56)); border-radius: 15px 15px 5px 5px; box-shadow: rgba(24, 56, 35, 0.19) 0px 25px 60px; transform: rotateX(calc(var(--hero-progress,0) * 12deg)); transform-origin: center bottom;}
.showcase .camera{height: 3px; width: 3px; border-radius: 100%; background: rgb(129, 152, 135); position: absolute; top: 4px; left: 50%;}
.showcase .device-display{aspect-ratio: 1.75 / 1; background: rgb(8, 45, 34); overflow: hidden; border-radius: 6px; color: rgb(217, 246, 212); position: relative;}
.showcase .screen-top,.showcase .screen-bottom{position: absolute; left: 5%; right: 5%; display: flex; justify-content: space-between; font: 7px "IBM Plex Mono", monospace; letter-spacing: 0.08em; z-index: 2;}
.showcase .screen-top{top: 7%;}
.showcase .screen-bottom{bottom: 7%; opacity: 0.6;}
.showcase .screen-art{position: absolute; inset: 0px; overflow: hidden; background: radial-gradient(at 75% 80%, rgb(66, 153, 107), transparent 65%);}
.showcase .screen-title{position: absolute; left: 8%; top: 28%; font: 500 clamp(28px, 4vw, 57px) / 1.05 Sora, sans-serif; letter-spacing: -0.06em; z-index: 2;}
.showcase .ribbon{position: absolute; right: 3%; top: -50%; width: 40%; height: 220%; border-radius: 50%; transform: rotate(36deg); border: 35px solid rgb(119, 200, 133); box-shadow: rgba(192, 239, 137, 0.376) 10px 0px 22px inset, rgba(0, 28, 27, 0.44) 12px 0px 25px;}
.showcase .r2{right: -12%; border-color: rgb(32, 121, 87);}
.showcase .r3{right: -28%; border-color: rgb(162, 204, 125);}
.showcase .device-bottom{height: 12px; background: linear-gradient(rgb(169, 182, 168), rgb(231, 238, 228) 40%, rgb(124, 136, 125)); width: 111%; margin-left: -5.5%; border-radius: 2px 2px 50% 50%; box-shadow: rgba(22, 46, 36, 0.15) 0px 20px 24px;}
.showcase .device-bottom::after{content: ""; display: block; margin: auto; width: 15%; height: 4px; background: rgb(125, 141, 125); border-radius: 0px 0px 8px 8px;}
.showcase .speaker-device{position: absolute; bottom: 15%; left: 2%; width: 15%; height: 43%; border-radius: 25px; background: linear-gradient(120deg, rgb(83, 98, 89), rgb(22, 37, 29)); transform: rotate(-10deg) translateY(calc(var(--hero-progress,0) * -60px)); box-shadow: rgba(35, 60, 36, 0.16) 12px 28px 30px; display: flex; align-items: center; flex-direction: column; padding: 20px 10px; color: rgb(197, 215, 202); font: 7px monospace; gap: 12px;}
.showcase .speaker-mesh{width: 85%; height: 75%; border-radius: 50%; background: radial-gradient(rgb(24, 35, 28) 1px, transparent 1.5px) 0px 0px / 4px 4px, rgb(67, 80, 71);}
.showcase .speaker-light{height: 3px; width: 23px; background: rgb(127, 255, 177); box-shadow: rgb(127, 255, 177) 0px 0px 9px;}
.showcase .router-device{position: absolute; right: 2%; bottom: 21%; width: 14%; aspect-ratio: 1 / 1; border-radius: 26%; background: linear-gradient(130deg, rgb(255, 255, 255), rgb(215, 223, 211)); box-shadow: rgba(24, 56, 35, 0.125) 10px 25px 35px, rgb(201, 210, 199) -3px -4px 3px inset; transform: rotate(12deg) translateY(calc(var(--hero-progress,0) * 40px)); display: grid; place-content: center;}
.showcase .router-symbol{font: 60px / 1 serif; color: rgb(180, 192, 181);}
.showcase .status-dot{display: inline-block; width: 6px; height: 6px; background: rgb(0, 185, 97); border-radius: 50%; margin-right: 7px;}
.showcase .router-device .status-dot{margin: 8px auto;}
.showcase .floating-label{position: absolute; font: 9px "IBM Plex Mono", monospace; background: rgba(255, 255, 255, 0.66); backdrop-filter: blur(12px); padding: 12px 15px; border: 1px solid rgb(255, 255, 255); border-radius: 30px; z-index: 3;}
.showcase .label-left{left: -2%; top: 6%;}
.showcase .label-right{right: -2%; bottom: 3%;}
.showcase .hero-foot{margin-top: auto; width: 100%; display: flex; justify-content: space-between; color: rgb(103, 113, 103); font: 9px "IBM Plex Mono", monospace; letter-spacing: 0.12em;}
.showcase .hero-orbit{position: absolute; width: 70vw; height: 70vw; border: 1px solid rgba(175, 194, 170, 0.314); border-radius: 50%; top: 50%; pointer-events: none;}
@media (min-width: 1500px){.showcase .device-scene{width: 1050px; height: 390px;}
.showcase-pin{padding-top: 135px;}
}
@media (max-height: 800px) and (min-width: 761px){.showcase-pin{padding-top: 100px; min-height: 650px;}
.showcase h1{font-size: 56px; margin: 14px 0px;}
.showcase-copy p{font-size: 13px;}
.showcase .device-scene{width: 730px; height: 270px; margin-top: 25px;}
.showcase .actions{margin-top: 18px;}
}
@media (max-width: 760px){.showcase{height: auto; min-height: 0px;}
.showcase-pin{position: relative; height: auto; min-height: 740px; padding: 125px 6vw 25px;}
.showcase h1{font-size: clamp(39px, 8.5vw, 60px);}
.showcase-copy p{font-size: 13px;}
.showcase-copy p br{display: none;}
.showcase .actions{gap: 17px; flex-wrap: wrap;}
.showcase .pill{font-size: 12px; padding: 13px 18px;}
.showcase .text-link{font-size: 12px;}
.showcase .device-scene{width: 98vw; height: 245px; margin-top: 55px; transform: none;}
.showcase .workstation{width: 72%; left: 14%;}
.showcase .speaker-device{left: 4%; bottom: 8%; width: 16%; height: 32%; padding: 12px 7px; border-radius: 16px;}
.showcase .router-device{right: 5%; bottom: 10%; width: 16%;}
.showcase .router-symbol{font-size: 35px;}
.showcase .label-left{left: 5%; top: -25px; font-size: 7px; padding: 9px;}
.showcase .label-right{right: 4%; bottom: -3%; font-size: 7px; padding: 9px;}
.showcase .hero-foot{margin-top: 35px; font-size: 7px; gap: 20px;}
.showcase .screen-top,.showcase .screen-bottom{font-size: 5px;}
.showcase .ribbon{border-width: 22px;}
}
@media (prefers-reduced-motion: reduce){.showcase{height: auto; min-height: 0px;}
.showcase-pin{position: relative;}
.showcase-copy,.showcase .device-scene,.showcase .device-lid,.showcase .speaker-device,.showcase .router-device{transform: none; opacity: 1;}
}

.showcase{margin-top:-88px}.showcase h1{margin:22px 0 20px}.showcase .pill{background:#008b47}.showcase .hero-foot{line-height:1.5}@media(max-width:760px){.showcase{margin-top:-74px}}