/* xosialX · shared app phone mockups (NuCalm / University / Business App screens) */
.ap{--w:220px;position:relative;width:var(--w);aspect-ratio:9 / 19.3;border-radius:calc(var(--w) * .15);padding:calc(var(--w) * .035);
  background:linear-gradient(150deg,#4a4f58 0%,#16191f 18%,#0b0d11 55%,#2b2f37 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 0 0 calc(var(--w) * .012) #050608,0 60px 90px -40px rgba(0,0,0,.7),0 24px 40px -24px rgba(0,0,0,.55);
  container-type:inline-size;flex:none}
.ap:after{content:"";position:absolute;right:calc(var(--w) * -.012);top:24%;width:calc(var(--w) * .014);height:12%;border-radius:2px;background:#2b2f37}
.ap-screen{position:relative;width:100%;height:100%;overflow:hidden;border-radius:calc(var(--w) * .118);background:#05070c;color:#F6F1EB;font-family:var(--sans);display:flex;flex-direction:column}
.ap-island{position:absolute;left:50%;top:3.2cqw;transform:translateX(-50%);width:28%;height:7.6cqw;border-radius:99px;background:#000;z-index:5}
.ap-status{display:flex;justify-content:space-between;align-items:center;padding:4.2cqw 8cqw 0;font-size:4.6cqw;font-weight:600;height:12cqw;flex:none;position:relative;z-index:4}
.ap-status svg{width:14cqw;height:4.6cqw}
.ap-nc .ap-screen{background:linear-gradient(180deg,#05070c 0%,#0a0f1c 100%)}
.ap-nc .nc-logo{text-align:center;font-weight:700;font-size:8cqw;letter-spacing:-.02em;margin-top:2cqw}
.ap-nc .nc-logo span{color:#3BA4E6}
.ap-nc .nc-q{text-align:center;font-size:4.6cqw;font-weight:600;margin:2.5cqw 0 3cqw}
.ap-nc .nc-chips{display:flex;justify-content:center;gap:1.8cqw;padding:0 5cqw;margin-bottom:3.5cqw}
.ap-nc .nc-chips span{font-size:2.9cqw;padding:1.4cqw 2.4cqw;border-radius:2cqw;background:#2a2d33;color:#e6e6e6;white-space:nowrap}
.ap-nc .nc-list{display:grid;gap:2.4cqw;padding:0 5cqw 5cqw}
.ap-nc .nc-card{position:relative;border-radius:3cqw;padding:3cqw 10cqw 3cqw 3.4cqw;min-height:17cqw;overflow:hidden;isolation:isolate}
.ap-nc .nc-card b{display:block;font-size:4.6cqw;font-weight:700;line-height:1.15}
.ap-nc .nc-card small{display:block;font-size:3.2cqw;opacity:.92;line-height:1.3;margin-top:.8cqw}
.ap-nc .nc-card:after{content:"i";position:absolute;right:3cqw;top:3cqw;width:4.6cqw;height:4.6cqw;border-radius:50%;border:.5cqw solid currentColor;font-size:3cqw;font-weight:700;display:grid;place-items:center;font-family:Georgia,serif;font-style:italic;opacity:.9}
.ap-nc .nc-card:before{content:"";position:absolute;inset:0;z-index:-1;opacity:.55;background:
  radial-gradient(60% 40% at 20% 30%,rgba(255,255,255,.35),transparent 70%),
  radial-gradient(50% 35% at 75% 80%,rgba(255,255,255,.25),transparent 70%),
  repeating-radial-gradient(circle at 30% 120%,transparent 0 6px,rgba(255,255,255,.08) 7px 9px)}
.ap-nc .c-rescue{background:linear-gradient(115deg,#1638b5,#2f74e6 55%,#1a4ad0)}
.ap-nc .c-deep{background:linear-gradient(115deg,#5b17c9,#9433e6 70%,#7b25d8)}
.ap-nc .c-deepplus{background:linear-gradient(115deg,#140f3d,#2a1f73 60%,#3b2b94)}
.ap-nc .c-deepplus:before{opacity:.15}
.ap-nc .c-nap{background:linear-gradient(115deg,#1d58d8,#3f8ff5 60%,#2a6cea)}
.ap-nc .c-focus{background:linear-gradient(115deg,#0b5f6a,#139aa3 60%,#0e7d87)}
.ap-nc .c-master{background:#0b0c10;box-shadow:inset 0 0 0 .4cqw rgba(255,255,255,.12)}
.ap-nc .c-master:before{display:none}
.ap-uni .ap-screen{background:linear-gradient(180deg,#14110c 0%,#0D0F12 40%)}
.ap-uni .u-head{display:flex;align-items:center;justify-content:center;gap:2.4cqw;margin-top:1.5cqw;font-size:4cqw;letter-spacing:.2em;text-transform:uppercase;color:#FFDC9A;font-weight:500}
.ap-uni .u-head img{width:9cqw;height:auto}
.ap-uni .u-sec{padding:0 6cqw;margin-top:4.5cqw;font-size:3.4cqw;letter-spacing:.16em;text-transform:uppercase;color:#FFC450;font-weight:500}
.ap-uni .u-feat{margin:2.4cqw 6cqw 0;border-radius:4cqw;overflow:hidden;position:relative;aspect-ratio:1 / 1.08;background:#222}
.ap-uni .u-feat img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.ap-uni .u-feat:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(13,15,18,.92) 100%)}
.ap-uni .u-feat .t{position:absolute;left:4cqw;right:4cqw;bottom:3.6cqw;z-index:1}
.ap-uni .u-feat .t small{display:block;font-size:3cqw;letter-spacing:.14em;text-transform:uppercase;color:#FFDC9A}
.ap-uni .u-feat .t b{display:block;font-family:var(--serif);font-weight:400;font-size:7.4cqw;line-height:1.05;margin-top:1cqw}
.ap-uni .u-feat .pl{position:absolute;right:4cqw;top:4cqw;z-index:1;width:11cqw;height:11cqw;border-radius:50%;background:#FFC450;display:grid;place-items:center}
.ap-uni .u-feat .pl svg{width:4.4cqw;height:4.4cqw;color:#0D0F12;margin-left:.6cqw}
.ap-uni .u-row{display:flex;align-items:center;gap:3cqw;margin:2.8cqw 6cqw 0}
.ap-uni .u-row img{width:12cqw;height:12cqw;border-radius:2.6cqw;object-fit:cover;object-position:50% 20%;flex:none}
.ap-uni .u-row b{display:block;font-size:3.8cqw;font-weight:600;line-height:1.2}
.ap-uni .u-row span{display:block;font-size:3cqw;color:rgba(246,241,235,.6);line-height:1.3}
.ap-uni .u-row i{display:block;height:.9cqw;border-radius:9px;background:rgba(255,220,154,.18);margin-top:1.4cqw;overflow:hidden}
.ap-uni .u-row i:before{content:"";display:block;height:100%;width:var(--p,40%);background:linear-gradient(90deg,#7A5812,#FFC450)}
.ap-uni .u-row>div{flex:1;min-width:0}
.ap-app .ap-screen{background:radial-gradient(90% 55% at 50% 42%,rgba(47,84,244,.36) 0%,rgba(5,7,12,0) 70%),radial-gradient(60% 30% at 80% 50%,rgba(108,227,236,.2) 0%,transparent 70%),#04060b}
.ap-app .a-word{display:block;width:44%;margin:6cqw auto 0}
.ap-app .a-x{filter:drop-shadow(0 0 4cqw rgba(86,173,243,.55)) drop-shadow(0 0 1cqw rgba(108,227,236,.6))}
.ap-app .a-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:3cqw;padding:0 6cqw;margin-top:auto;margin-bottom:9cqw}
.ap-app .a-tiles span{aspect-ratio:.72;border-radius:3.2cqw;display:grid;grid-template-rows:1fr auto;place-items:center;padding:3cqw 1cqw 3.4cqw;font-size:3.5cqw;letter-spacing:.04em;font-weight:500;
  background:linear-gradient(#05070c,#05070c) padding-box,linear-gradient(160deg,#6CE3EC,#56ADF3 50%,#2F54F4) border-box;border:.6cqw solid transparent;box-shadow:0 0 4cqw rgba(86,173,243,.35)}
.ap-app .a-tiles svg{width:10cqw;height:10cqw;color:#9BE9F0;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@keyframes apFloat{from{transform:translateY(-6px)}to{transform:translateY(6px)}}
.ap-app .a-x{display:block;width:62%;height:auto;aspect-ratio:160 / 136;margin:14cqw auto 0}
.ap-uni .u-nav{margin-top:auto;display:grid;grid-template-columns:repeat(3,1fr);padding:3cqw 4cqw 6cqw;border-top:.3cqw solid rgba(255,220,154,.14);background:rgba(13,15,18,.9)}
.ap-uni .u-nav span{display:grid;justify-items:center;gap:1cqw;font-size:2.9cqw;color:rgba(246,241,235,.55)}
.ap-uni .u-nav span.on{color:#FFC450}
.ap-uni .u-nav svg{width:5.4cqw;height:5.4cqw}
.ap-nc .nc-mini{margin:auto 4cqw 5cqw;display:flex;align-items:center;gap:3cqw;padding:2.6cqw 3.4cqw;border-radius:3.4cqw;background:#161a24;box-shadow:inset 0 0 0 .3cqw rgba(59,164,230,.35)}
.ap-nc .nc-mini i{width:9cqw;height:9cqw;border-radius:2cqw;background:linear-gradient(115deg,#0b5f6a,#139aa3);flex:none}
.ap-nc .nc-mini b{display:block;font-size:3.8cqw}
.ap-nc .nc-mini span{display:block;font-size:2.9cqw;color:#3BA4E6}
.ap-nc .nc-mini>div{flex:1}
.ap-nc .nc-mini svg{width:5cqw;height:5cqw}

.ap-nc .c-flow{background:linear-gradient(115deg,#7a3a12,#d9822b 60%,#b9621c)}
