.solution-chips button{transition:background .2s,color .2s,box-shadow .2s,transform .2s cubic-bezier(.2,.8,.2,1)}
.solution-chips button:hover,.solution-chips button:focus-visible{transform:translateY(-4px) scale(1.035);box-shadow:0 9px 18px #781d2830}
.solution-chips button:active{transform:translateY(-1px) scale(.98)}
.solution-chips button:focus-visible,.screen-tabs button:focus-visible,.screen-enlarge:focus-visible{outline:3px solid var(--lime);outline-offset:4px}
.hero-frame{transform:none}
.frame-screen{position:relative;aspect-ratio:16/9;background:#fff8f0}
.frame-screen .product-shot{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:contain;object-position:center;position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .32s ease,visibility .32s}
.frame-screen .product-shot.active{opacity:1;visibility:visible}
.screen-enlarge{position:absolute;right:10px;bottom:10px;z-index:1;border:1px solid #ddd9d1;border-radius:9px;background:#fffffff2;color:#252521;padding:7px 11px;font:700 .7rem var(--sans);cursor:pointer;box-shadow:0 2px 9px #0001}
.screen-tabs{display:flex;gap:6px;align-items:center;justify-content:center;margin:16px 0 0;position:relative;z-index:2}
.screen-tabs button{border:1px solid #deded8;border-radius:999px;background:white;color:#66665f;padding:8px 13px;font:700 .72rem var(--sans);cursor:pointer;transition:background .2s,color .2s,transform .2s}
.screen-tabs button[aria-selected=true]{background:#292925;color:white;border-color:#292925}
.screen-tabs button:hover{transform:translateY(-2px)}
.screen-dialog{padding:0;width:min(1440px,calc(100vw - 40px));max-width:none;max-height:calc(100dvh - 40px);border:0;border-radius:18px;background:#fff8f0;box-shadow:0 24px 80px #0004}
.screen-dialog::backdrop{background:#191914b8;backdrop-filter:blur(5px)}
.screen-dialog-header{display:flex;gap:15px;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid #e6ded4;background:white}
.screen-dialog-header h2{font-size:1.1rem;margin:0;letter-spacing:-.02em}
.screen-dialog-header button{width:36px;height:36px;background:#f4f4f0;border:1px solid #e5e5df;border-radius:50%;cursor:pointer;font-size:22px}
.screen-dialog img{display:block;width:100%;max-height:calc(100dvh - 170px);object-fit:contain}
.screen-dialog p{font-size:.75rem;color:#706d66;margin:0;padding:12px 22px;text-align:center}
body:has(.screen-dialog[open]){overflow:hidden}
@media(max-width:700px){.screen-tabs{gap:4px}.screen-tabs button{font-size:.65rem;padding:8px 10px}.screen-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}.screen-enlarge{font-size:.6rem;padding:5px 8px}.screen-dialog-header{padding:12px}.screen-dialog-header h2{font-size:.95rem}}
@media(prefers-reduced-motion:reduce){.solution-chips button,.screen-tabs button,.frame-screen .product-shot{transition:none}.solution-chips button:hover,.solution-chips button:focus-visible,.solution-chips button:active,.screen-tabs button:hover{transform:none}}

/* Code-built device frames keep the real application images intact. */
.hero-visual{isolation:isolate;padding:30px 0 18px;width:100%;max-width:790px}
.hero-visual:before{content:"";position:absolute;inset:5% -7% 9%;z-index:-1;background:radial-gradient(ellipse,#ff4d2f1c,transparent 67%);pointer-events:none}
.monitor-device{position:relative;width:83%;padding-bottom:74px}
.monitor-device .hero-frame{border:0;border-radius:17px 17px 12px 12px;background:#181a1d;box-shadow:0 22px 38px #27211a26,0 0 0 1px #fff8,inset 0 1px 1px #fff7;overflow:hidden;padding:13px 10px 0}
.monitor-device .frame-head{height:5px;min-height:5px;padding:0;margin-bottom:8px;justify-content:center;position:relative}
.monitor-device .frame-head:after{content:"";width:5px;height:5px;border-radius:50%;background:#3d4650;box-shadow:inset 0 0 0 1px #101113}
.monitor-device .frame-logo,.monitor-device .frame-line,.monitor-device .frame-dot{display:none}
.monitor-device .frame-screen{border-radius:3px;aspect-ratio:16/9;box-shadow:0 0 0 1px #000}
.monitor-device .frame-foot{height:36px;margin:10px -10px 0;padding:10px 6px;background:linear-gradient(100deg,#dbdce0,#f4f4f6 45%,#d1d3d8);color:#55595e;text-align:center;font-size:.49rem;border-top:1px solid #ffffffe0}
.monitor-stand{position:absolute;bottom:11px;left:50%;width:28%;height:64px;transform:translateX(-50%);background:linear-gradient(90deg,#c1c3c9,#f0f1f3 48%,#bec0c6);clip-path:polygon(29% 0,71% 0,78% 84%,100% 94%,100% 100%,0 100%,0 94%,22% 84%);z-index:-1}
.monitor-base{position:absolute;bottom:6px;left:50%;width:35%;height:9px;transform:translateX(-50%);border-radius:50% 50% 4px 4px;background:linear-gradient(#f1f2f4,#b5b8c0);box-shadow:0 9px 12px #26232226}
.phone-device{position:absolute;right:0;bottom:79px;width:23%;max-width:180px;z-index:3;margin:0}
.phone-shell{display:block;position:relative;padding:6px;border:2px solid #70747c;border-radius:27px;background:#17191d;box-shadow:9px 17px 30px #17191c35,inset 0 0 0 1px #030405;cursor:zoom-in;width:100%}
.phone-shell:after{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);width:28%;height:9px;border-radius:10px;background:#15171a}
.phone-shell img{width:100%;height:auto;aspect-ratio:1284/2778;object-fit:contain;display:block;border-radius:20px;background:#f4f7f8}
.phone-device figcaption{margin-top:9px;text-align:center;font-size:.68rem;font-weight:800;color:#353631}
.hero-visual .float-card{display:none}
.monitor-device .screen-enlarge{left:10px;right:auto}
.monitor-device .screen-enlarge{width:max-content;max-width:calc(100% - 20px)}
.hero-visual .screen-tabs{margin-top:4px;margin-right:8%;min-height:34px}
.hero-visual .screen-tabs button{font-size:.66rem;padding:7px 12px}
.screen-dialog img.phone-enlarged{max-height:calc(100dvh - 170px);width:auto;max-width:100%;margin:auto}
@media(max-width:1050px){.monitor-device{width:90%}.phone-device{width:24%;bottom:80px}.hero-visual{max-width:760px}}
@media(max-width:700px){.hero-visual{padding-top:12px}.monitor-device{width:92%;padding-bottom:59px}.monitor-device .hero-frame{padding:8px 6px 0;border-radius:11px}.monitor-device .frame-head{margin-bottom:5px;height:4px;min-height:4px}.monitor-device .frame-head:after{width:4px;height:4px}.monitor-device .frame-foot{margin:6px -6px 0;height:27px;font-size:.32rem;padding:8px 3px}.monitor-stand{height:50px;bottom:8px}.monitor-base{bottom:4px;height:7px}.phone-device{width:26%;bottom:68px}.phone-shell{padding:4px;border-radius:17px;border-width:1px}.phone-shell img{border-radius:12px}.phone-shell:after{top:7px;height:5px}.phone-device figcaption{font-size:.52rem;margin-top:5px}.hero-visual .screen-tabs{margin:2px 0 0}.hero-visual .screen-tabs button{font-size:.62rem;padding:7px 10px}.monitor-device .screen-enlarge{bottom:5px;right:5px;font-size:.5rem;padding:4px 6px}}