.app-product-feature{position:relative;min-height:424px;margin-top:14px}
.app-prototype{position:absolute;inset:0;overflow:hidden;border:1px solid rgba(89,221,236,.3);border-radius:22px;background:radial-gradient(circle at 50% 46%,rgba(45,232,253,.2),transparent 32%),repeating-radial-gradient(circle at 50% 46%,transparent 0 53px,rgba(76,221,234,.07) 54px 55px),linear-gradient(155deg,#0b4d65,#061f37)}
.app-prototype:before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(66,209,224,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(66,209,224,.025) 1px,transparent 1px);background-size:22px 22px;mask-image:radial-gradient(circle at 50% 50%,#000,transparent 79%)}
.app-links{position:absolute;z-index:1;inset:8% 5%;width:90%;height:82%;overflow:visible;fill:none;stroke:rgba(92,231,241,.66);stroke-width:1;stroke-dasharray:4 5;filter:drop-shadow(0 0 4px rgba(45,232,253,.55))}.app-links path{animation:app-link-flow 7s linear infinite}.app-links circle{fill:#55ebf6;stroke:none;filter:drop-shadow(0 0 5px #2de8fd)}
.app-phone{position:absolute;z-index:3;left:50%;top:48%;width:102px;height:194px;padding:7px;border:1px solid rgba(111,239,247,.82);border-radius:25px;background:linear-gradient(155deg,#0b3b55,#031526);box-shadow:0 18px 34px rgba(0,7,17,.46),0 0 36px rgba(45,232,253,.22);transform:translate(-50%,-50%) scale(1.56)}
.app-phone:after{content:"";position:absolute;left:50%;bottom:3px;width:30px;height:2px;border-radius:4px;background:rgba(157,236,242,.42);transform:translateX(-50%)}
.app-phone-speaker{position:absolute;z-index:4;left:50%;top:6px;width:27px;height:4px;border-radius:5px;background:#082237;box-shadow:inset 0 0 0 1px rgba(91,206,219,.16);transform:translateX(-50%)}
.app-screen{display:flex;height:100%;box-sizing:border-box;padding:13px 7px 7px;flex-direction:column;border:1px solid rgba(76,201,216,.3);border-radius:18px;background:linear-gradient(180deg,#0d4c64,#082a43 60%,#061d34);overflow:hidden}
.app-status{display:flex;align-items:center;justify-content:flex-end;gap:2px;color:#9deef4;font-size:4.3px}.app-status span{margin-right:auto}.app-status i{display:block;width:3px;height:3px;border-radius:50%;background:#4cddea}.app-status i:last-child{width:6px;border-radius:3px}
.app-profile{display:grid;grid-template-columns:17px 1fr auto;gap:5px;align-items:center;margin-top:8px}.app-profile>span{display:grid;width:17px;height:17px;place-items:center;border:1px solid rgba(89,229,240,.5);border-radius:50%;color:#041a2c;background:#41dce9;font-size:5.6px;font-weight:900}.app-profile>div{display:grid}.app-profile small,.app-main-card small,.app-activity>small{color:#83d7e0;font-size:4px;font-weight:850;letter-spacing:.08em}.app-profile b{color:#f0feff;font-size:6.8px}.app-profile>i{color:#69c4ce;font-size:5.5px;font-style:normal}
.app-main-card{position:relative;margin-top:8px;padding:7px;border:1px solid rgba(85,223,234,.4);border-radius:9px;background:linear-gradient(135deg,rgba(8,74,93,.96),rgba(15,116,127,.7));overflow:hidden}.app-main-card:after{content:"";position:absolute;width:55px;height:55px;right:-24px;bottom:-30px;border:1px solid rgba(97,232,241,.19);border-radius:50%;box-shadow:0 0 0 11px rgba(45,232,253,.025)}.app-main-card strong{display:block;margin-top:3px;color:#f4feff;font-size:17px;line-height:1}.app-main-card span{color:#66ecf5;font-size:4.6px}.app-main-card i{display:block;width:62%;height:12px;margin-top:5px;border-radius:4px;background:linear-gradient(90deg,rgba(72,226,238,.58),rgba(72,226,238,.08))}
.app-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-top:5px}.app-actions span{display:grid;padding:4px 1px;place-items:center;border:1px solid rgba(78,199,213,.2);border-radius:5px;background:rgba(4,31,49,.55)}.app-actions i{display:grid;width:11px;height:11px;place-items:center;border-radius:4px;color:#5ce8f2;background:rgba(45,232,253,.1);font-size:6.5px;font-style:normal}.app-actions b{margin-top:2px;color:#d5f3f5;font-size:4px}
.app-activity{display:grid;gap:3px;margin-top:6px}.app-activity>span{display:grid;grid-template-columns:7px 1fr auto;gap:4px;align-items:center;padding:3px 0;border-bottom:1px solid rgba(91,206,218,.1)}.app-activity>span>i{width:7px;height:7px;border-radius:2px;background:#21a9ba}.app-activity b{color:#d8f4f6;font-size:4.5px}.app-activity em{color:#78b6c0;font-size:4px;font-style:normal}
.app-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:auto 5px 1px;padding-top:5px;border-top:1px solid rgba(92,207,219,.12)}.app-nav i{height:3px;border-radius:4px;background:#2a7180}.app-nav i:first-child{background:#42e1ed;box-shadow:0 0 6px rgba(45,232,253,.5)}
.app-node{position:absolute;z-index:4;min-width:72px;padding:9px 11px;border:1px solid rgba(83,213,226,.62);border-radius:999px;background:rgba(3,29,48,.94);box-shadow:0 7px 17px rgba(0,8,18,.25);color:#e8fdff;font-size:9.5px;font-weight:850;letter-spacing:.045em;text-align:center}.app-node--ios{left:6%;top:12%}.app-node--android{right:6%;top:12%}.app-node--api{left:4%;top:46%}.app-node--crm{right:4%;top:46%}.app-node--push{left:7%;bottom:12%}.app-node--store{right:7%;bottom:12%}
.app-caption{position:absolute;z-index:4;left:50%;bottom:11px;color:#9af0f5;font-size:9px;font-weight:850;letter-spacing:.09em;white-space:nowrap;transform:translateX(-50%)}
@keyframes app-link-flow{to{stroke-dashoffset:-36}}
@media(max-width:760px){.app-product-feature{min-height:410px}.app-phone{transform:translate(-50%,-50%) scale(1.58)}.app-node{min-width:62px;padding:8px 8px;font-size:8px}.app-node--ios,.app-node--push{left:3%}.app-node--android,.app-node--store{right:3%}.app-node--api{left:1%}.app-node--crm{right:1%}.app-caption{bottom:9px;font-size:7.5px}}
@media(prefers-reduced-motion:reduce){.app-links path{animation:none}}

/* Portrait mobile: local device rings remain; page-wide arcs do not. */
@media(max-width:760px){.dev-hero:before{display:none}}