.notification-art{position:relative;min-height:470px;padding:24px;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 35% 20%,rgba(250,197,28,.26),transparent 27%),linear-gradient(145deg,#e9f0ff,#d6e3fb)}.push-phone{position:relative;z-index:3;width:244px;height:445px;padding:7px;border-radius:38px;background:linear-gradient(145deg,#727b8d,#121721 17%,#080b10 84%,#596273);box-shadow:0 30px 55px rgba(12,35,73,.3),inset 0 0 0 1px rgba(255,255,255,.22);transform:rotate(-3deg)}.push-phone-screen{position:relative;height:100%;padding:10px 12px;overflow:hidden;border-radius:32px;color:#fff;background:linear-gradient(165deg,#365483,#152a4d 47%,#0c1c37)}.push-phone-screen:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 75% 30%,rgba(250,197,28,.24),transparent 24%),radial-gradient(circle at 25% 75%,rgba(65,111,205,.5),transparent 34%)}.push-status{position:relative;z-index:2;height:22px;display:flex;justify-content:space-between;align-items:center;padding:0 4px;font-size:7px;font-weight:700}.push-status i{position:absolute;left:50%;top:-2px;width:66px;height:19px;transform:translateX(-50%);border-radius:20px;background:#050608}.push-clock{position:relative;z-index:2;padding:12px 0 13px;text-align:center}.push-clock small{display:block;color:#d7deeb;font-size:8px}.push-clock strong{display:block;font:500 43px/1.1 var(--display);letter-spacing:-2px}.phone-notifications{position:relative;z-index:2;display:flex;flex-direction:column;gap:7px}.notification-art .notification{width:100%;min-height:72px;padding:9px;gap:9px;border:1px solid rgba(255,255,255,.7);border-radius:14px;background:rgba(247,249,253,.88);box-shadow:0 8px 20px rgba(3,16,38,.14);color:#10213d;backdrop-filter:blur(13px);transform:none}.notification-art .notification>span{flex:0 0 34px;height:34px;border-radius:10px;background:#fac51c;color:#071a38}.notification-art .notification>span b{font:800 15px var(--display)}.notification-art .notification p{min-width:0;margin:0;font-size:9px;line-height:1.22}.notification-art .notification p small{display:block;margin:0 0 3px;color:#6c7789;font-size:6px;letter-spacing:.5px}.notification-art .notification p>b{display:block;font-size:9px}.notification-art .notification p em{display:block;margin-top:2px;overflow:hidden;color:#59667a;font-size:7px;font-style:normal;white-space:nowrap;text-overflow:ellipsis}.push-actions{position:absolute;z-index:2;left:19px;right:19px;bottom:19px;display:flex;justify-content:space-between}.push-actions span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.27);font-size:10px}.push-homebar{position:absolute;z-index:2;left:50%;bottom:6px;width:76px;height:3px;transform:translateX(-50%);border-radius:4px;background:#fff}.push-signal{position:absolute;border:1px solid rgba(36,88,198,.15);border-radius:50%}.signal-one{width:330px;height:330px}.signal-two{width:430px;height:430px}.notification-art:hover .push-phone{transform:rotate(-1deg) translateY(-5px)}.push-phone{transition:transform .45s cubic-bezier(.2,.8,.2,1)}
@media(max-width:900px){.notification-art{min-height:500px}.push-phone{width:255px;height:465px}}
@media(max-width:620px){.notification-art{min-height:440px;padding:18px}.push-phone{width:225px;height:410px;border-radius:34px}.push-phone-screen{border-radius:28px}.push-clock{padding:8px 0 10px}.push-clock strong{font-size:38px}.notification-art .notification{min-height:65px;padding:8px}.notification-art .notification p em{max-width:140px}}
.push-unlimited{position:absolute;z-index:5;right:18px;bottom:26px;display:flex;align-items:center;gap:9px;padding:10px 13px;border:1px solid rgba(255,255,255,.85);border-radius:14px;background:rgba(255,255,255,.93);color:#10213d;box-shadow:0 13px 28px rgba(12,35,73,.16);backdrop-filter:blur(9px)}.push-unlimited>b{display:grid;place-items:center;width:29px;height:29px;border-radius:9px;background:#fac51c;color:#061a38;font:800 20px/1 var(--display)}.push-unlimited span,.push-unlimited small{display:block}.push-unlimited span{font-size:9px;font-weight:800}.push-unlimited small{margin-top:2px;color:#087759;font-size:7px;font-weight:700}
@media(max-width:620px){.push-unlimited{right:8px;bottom:18px;padding:8px 10px}.push-unlimited>b{width:25px;height:25px;font-size:17px}}
@media(prefers-reduced-motion:reduce){.push-phone{transition:none}}