/* Phone mockup rebuilt in CSS (the template's phone is a flat PNG with baked-in content). 311×672 like the template. */
.phone { position: relative; width: 311px; height: 672px; border-radius: 50px; padding: 9px; background: #0c0c0d; box-shadow: 0 0 0 1.5px #9ea3aa, 0 0 0 3px #d9dce0, 0 40px 70px -20px rgba(30, 20, 40, .35); flex: none; }
.phone::before, .phone::after { content: ''; position: absolute; left: -4px; width: 3px; border-radius: 2px 0 0 2px; background: #b9bdc3; }
.phone::before { top: 120px; height: 28px; }
.phone::after { top: 168px; height: 52px; box-shadow: 0 66px 0 #b9bdc3; }
.phone .scr { position: relative; height: 100%; border-radius: 41px; overflow: hidden; color: #000;
  background: radial-gradient(130% 60% at 70% 0%, #f2c2b6 0%, rgba(242, 194, 182, 0) 70%), linear-gradient(180deg, #efd2cf 0%, #e9e2ee 32%, #e5e9f5 62%, #dce8f7 100%); }
.island { position: absolute; top: 11px; left: 50%; width: 92px; height: 27px; margin-left: -46px; border-radius: 20px; background: #000; z-index: 3; }
.island::after { content: ''; position: absolute; right: 10px; top: 9px; width: 9px; height: 9px; border-radius: 50%; background: #1b1d2a; box-shadow: inset 0 0 0 2px #0f1018; }
.ph-home { position: absolute; bottom: 8px; left: 50%; width: 104px; height: 4px; margin-left: -52px; border-radius: 4px; background: #111; z-index: 3; }

.ph-head { display: flex; align-items: center; gap: 9px; padding: 56px 18px 0; }
.ph-av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(140deg, #f79276, #ec5a4f); color: #fff; font-weight: 600; font-size: 15px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .7); }
.ph-who { display: flex; flex-direction: column; gap: 2px; }
.ph-who small { font-size: 9px; color: rgba(0, 0, 0, .7); }
.ph-who b { font-size: 12.5px; font-weight: 600; }
.ph-bell { margin-left: auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .55); }
.ph-bell svg { width: 16px; height: 16px; }

.ph-bal { padding: 30px 18px 0; }
.ph-bal small { display: block; font-size: 8.75px; line-height: 11.66px; text-transform: uppercase; letter-spacing: .01em; }
.ph-num { margin-top: 10px; height: 48px; font-size: 44px; font-weight: 400; letter-spacing: -.01em; line-height: 1; }

.ph-cards { margin-top: 18px; height: 156px; overflow: visible; padding-left: 18px; }
.ph-track { display: flex; gap: 10px; transition: transform .75s var(--spring); }
.pcard { position: relative; width: 249px; height: 156px; flex: none; border-radius: 11.6px; padding: 17px; color: #fafafa; font-family: 'Montserrat', var(--ft); display: flex; flex-direction: column; overflow: hidden;
  box-shadow: inset 0 -1.8px 0 rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .25), 0 10px 22px -10px rgba(0, 0, 0, .45); }
.pcard.dark { background: linear-gradient(9deg, #1c1c1c 0%, #545454 100%); }
.pcard.slate { background: linear-gradient(67deg, #465864 0%, #aab9c3 100%); }
.pcard.coral { background: linear-gradient(60deg, #9d381c 0%, #f79276 100%); }
.pcard small { font-size: 9.26px; line-height: 1.2; font-weight: 600; text-transform: uppercase; }
.pcard .pc-logo { position: absolute; right: 17px; top: 15px; height: 17px; width: auto; filter: brightness(0) invert(1); }
.pc-foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; }
.pc-foot span { display: flex; flex-direction: column; gap: 2px; }
.pc-foot b { font-size: 10px; font-weight: 600; letter-spacing: .02em; }
.pc-foot em { font-style: normal; font-size: 6.95px; font-weight: 600; opacity: .9; }
.pc-foot .mark { height: 31px; width: auto; color: #fff; }
.pc-foot .pc-nfc { width: 18px; height: 18px; position: absolute; right: 17px; top: 17px; }

.ph-acts { display: flex; justify-content: space-between; padding: 22px 26px 0; }
.ph-acts span { display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 9.5px; }
.ph-acts i { width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .62); display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7); }
.ph-acts svg { width: 19px; height: 19px; }

.ph-row { position: relative; margin: 14px 12px 0; padding: 12px 14px 14px; height: 86px; border-radius: 12px; background: rgba(255, 255, 255, .55); }
.ph-row + .ph-row { margin-top: 8px; }
.ph-row small { display: block; font-size: 8.5px; text-transform: uppercase; }
.ph-row div { display: flex; align-items: center; gap: 7px; margin-top: 22px; }
.ph-row b { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.ph-row em { font-style: normal; font-size: 8px; padding: 2px 6px; border-radius: 10px; background: #f0a291; color: #fff; }
.ph-row.fade { opacity: .55; }
.ph-row .bars { position: absolute; right: 12px; bottom: 14px; width: 82px; height: 44px;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .55) 0 1px, transparent 1px 3.4px);
  -webkit-mask: linear-gradient(0deg, #000 0 0) bottom/100% 100% no-repeat, linear-gradient(90deg, transparent 0 18%, #000 18% 22%, transparent 22% 36%, #000 36% 62%, transparent 62% 100%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,.25) 0%, #000 35%, #000 60%, rgba(0,0,0,.25) 100%);
  clip-path: polygon(0 70%, 8% 66%, 16% 72%, 24% 60%, 32% 52%, 40% 34%, 46% 20%, 52% 0, 58% 8%, 64% 26%, 70% 18%, 76% 44%, 84% 58%, 92% 66%, 100% 70%, 100% 100%, 0 100%); }

/* small phone (solution card / product) */
.phone.sm { width: 236px; height: 510px; border-radius: 40px; padding: 7px; }
.phone.sm .scr { border-radius: 33px; }