/* Real photography components: product cards, industry covers, hardware showcase. */

/* ---------- product cards (industry explorer, POS demo) ---------- */
.pos-prod.pp{position:relative;padding:8px 8px 10px;border-radius:14px;border:1px solid #E5E9E6;background:#fff;cursor:pointer;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s;animation:pp-in .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0ms);}
.pos-prod.pp:hover{transform:translateY(-4px);border-color:#CFE6DB;box-shadow:0 16px 30px -16px rgba(16,40,33,.35);}
@keyframes pp-in{from{opacity:0;transform:translateY(14px) scale(.96);}to{opacity:1;transform:none;}}
.pp-img{position:relative;height:96px;border-radius:10px;overflow:hidden;margin-bottom:9px;
  background:linear-gradient(110deg,#EEF2EF 8%,#F7FAF8 18%,#EEF2EF 33%);background-size:200% 100%;animation:pp-shimmer 1.2s linear infinite;}
@keyframes pp-shimmer{to{background-position:-200% 0;}}
.pp-img img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transform:scale(1.06);transition:opacity .5s ease,transform .8s cubic-bezier(.2,.8,.2,1);}
.pp-img img.ld{opacity:1;transform:scale(1);}
.pos-prod.pp:hover .pp-img img.ld{transform:scale(1.08);}
.pp-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.18));pointer-events:none;}
.pp-add{position:absolute;right:7px;bottom:7px;width:28px;height:28px;border-radius:50%;background:#fff;color:#1F5A4B;display:flex;align-items:center;justify-content:center;z-index:2;
  box-shadow:0 6px 14px rgba(0,0,0,.25);transform:scale(.6);opacity:0;transition:transform .25s cubic-bezier(.2,.9,.3,1.4),opacity .2s;}
.pp-add .lc{width:16px;height:16px;}
.pos-prod.pp:hover .pp-add{transform:scale(1);opacity:1;}
.pos-prod.pp .nm{font-size:12.5px;font-weight:700;color:#13231F;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pos-prod.pp .pr{font-size:13px;font-weight:800;margin-top:3px;color:#1C2925;}
.pos-prod.pp.bump{animation:pp-bump .45s cubic-bezier(.2,.9,.3,1.4);}
@keyframes pp-bump{40%{transform:scale(.94);}100%{transform:none;}}
.pp-fly{position:fixed;z-index:999;width:34px;height:34px;border-radius:50%;background-size:cover;background-position:center;box-shadow:0 8px 18px rgba(0,0,0,.3);pointer-events:none;
  transition:transform .7s cubic-bezier(.5,-.3,.6,1),opacity .7s;}
.frame-cart{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#2B3733;background:#fff;border:1px solid #E5E9E6;border-radius:999px;padding:4px 10px;transition:transform .3s;}
.frame-cart .lc{width:13px;height:13px;color:#22705C;}
.frame-cart.pop{transform:scale(1.12);}
.industry-mockup .pos-grid-mini{gap:14px;}
.pos-frame .pp-img{height:64px;}
.ci-th{width:26px;height:26px;border-radius:7px;object-fit:cover;flex-shrink:0;margin-right:8px;}

/* ---------- industry cards with real covers ---------- */
.ind-photo{position:relative;flex:1;min-height:170px;overflow:hidden;background:#E8EEEA;}
.ind-card.big .ind-photo{min-height:360px;}
.ind-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);transition:opacity .6s,transform 6s ease-out;}
.ind-photo img.ld{opacity:1;}
.ind-card:hover .ind-photo img.ld{transform:scale(1.14);}
.ind-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,14,11,0) 30%,rgba(6,14,11,.55) 100%);}
.ind-chips{position:absolute;left:12px;right:12px;bottom:12px;z-index:2;display:flex;gap:8px;flex-wrap:wrap;}
.ind-chip{display:flex;align-items:center;gap:8px;padding:5px 10px 5px 5px;border-radius:12px;color:#fff;font-size:11.5px;font-weight:700;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(8px);animation:pp-in .6s both;animation-delay:var(--d,0ms);}
.ind-chip img{width:30px;height:30px;border-radius:8px;object-fit:cover;}
.ind-chip b{display:block;font-size:11px;color:#F3E4B8;}

/* ---------- hardware showcase ---------- */
.hwx{display:flex;gap:26px;align-items:center;justify-content:center;flex-wrap:wrap;}
.hwx-track{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;}
.hwx-dev{display:flex;flex-direction:column;align-items:center;text-align:center;width:168px;}
.hwx-ph{position:relative;width:150px;height:118px;border-radius:20px;overflow:hidden;background:#fff;border:1px solid #E2E8E4;
  box-shadow:0 18px 30px -18px rgba(16,40,33,.45);transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s,border-color .4s;}
.hwx-ph img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .5s;}
.hwx-ph img.ld{opacity:1;}
.hwx-dev.on .hwx-ph{transform:translateY(-6px) scale(1.04);border-color:#3FB28F;box-shadow:0 0 0 4px rgba(63,178,143,.18),0 24px 40px -18px rgba(31,90,75,.6);}
.hwx-dev b{margin-top:14px;font-size:13.5px;font-weight:800;color:#13231F;}
.hwx-st{margin-top:6px;display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#5E6F69;background:#F1F5F2;border-radius:999px;padding:3px 10px;transition:all .3s;}
.hwx-st::before{content:"";width:7px;height:7px;border-radius:50%;background:#3FB28F;box-shadow:0 0 0 0 rgba(63,178,143,.6);}
.hwx-dev.on .hwx-st{background:#E3F2EC;color:#1F5A4B;}
.hwx-dev.on .hwx-st::before{animation:hwx-ping 1s infinite;}
@keyframes hwx-ping{0%{box-shadow:0 0 0 0 rgba(63,178,143,.6);}100%{box-shadow:0 0 0 8px rgba(63,178,143,0);}}
/* device effects */
.hwx-fx{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;}
.hwx-dev.on .hwx-fx{opacity:1;}
.hwx-fx.scan::before{content:"";position:absolute;left:8%;right:8%;height:2px;top:20%;background:#FF3B30;box-shadow:0 0 12px 3px rgba(255,59,48,.75);border-radius:2px;animation:hwx-scan 1s ease-in-out infinite alternate;}
@keyframes hwx-scan{to{top:78%;}}
.hwx-fx.tap::before{content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:2px solid #3FB28F;animation:hwx-ripple 1.1s ease-out infinite;}
@keyframes hwx-ripple{from{transform:scale(.4);opacity:1;}to{transform:scale(4.5);opacity:0;}}
.hwx-fx.print::before{content:"";position:absolute;left:30%;right:30%;bottom:0;height:0;background:repeating-linear-gradient(180deg,#fff 0 7px,#D8DED9 7px 8px);border:1px solid #D8DED9;border-bottom:none;border-radius:3px 3px 0 0;box-shadow:0 -4px 10px rgba(0,0,0,.15);animation:hwx-print 1.3s ease-out infinite;}
@keyframes hwx-print{to{height:62%;}}
.hwx-dev.on .hwx-ph.shake{animation:hwx-shake .5s ease-in-out 2;}
@keyframes hwx-shake{25%{transform:translate(-3px,-6px) scale(1.04);}75%{transform:translate(3px,-6px) scale(1.04);}}
.hwx-fx.coins::before,.hwx-fx.coins::after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FFF3BF,#E7CF6A 45%,#A88A2F);bottom:18%;left:38%;animation:hwx-coin 1s ease-out infinite;}
.hwx-fx.coins::after{left:56%;animation-delay:.35s;}
@keyframes hwx-coin{from{transform:translateY(0);opacity:1;}to{transform:translateY(-60px) rotate(180deg);opacity:0;}}
/* connectors */
.hwx-link{width:64px;height:18px;position:relative;margin-bottom:46px;flex-shrink:0;}
.hwx-link::before{content:"";position:absolute;left:0;right:8px;top:8px;height:2px;background:repeating-linear-gradient(90deg,#C9CFCB 0 6px,transparent 6px 10px);}
.hwx-link::after{content:"";position:absolute;right:0;top:4px;border:5px solid transparent;border-left:7px solid #B9C2BD;}
.hwx-link i{position:absolute;top:4px;left:0;width:10px;height:10px;border-radius:50%;background:#C9A84C;box-shadow:0 0 10px rgba(201,168,76,.9);opacity:0;}
.hwx-link.go i{animation:hwx-travel .9s cubic-bezier(.4,0,.2,1) forwards;}
@keyframes hwx-travel{0%{left:0;opacity:1;}100%{left:calc(100% - 14px);opacity:1;}}
/* status panel */
.hwx-panel{background:#fff;border:1px solid #E5E9E6;border-radius:20px;padding:20px 22px;min-width:230px;box-shadow:0 18px 40px -24px rgba(16,40,33,.4);}
.hwx-row{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:13px;font-weight:700;color:#8A9893;transition:color .3s;}
.hwx-row .lc{width:17px;height:17px;color:#C9CFCB;transition:color .3s,transform .3s;}
.hwx-row.ok{color:#13231F;} .hwx-row.ok .lc{color:#2E8B74;transform:scale(1.15);}
.hwx-row.all{border-top:1px dashed #D7E0DA;margin-top:6px;padding-top:12px;}
.hwx-row.all.ok{color:#1F5A4B;} .hwx-row.all.ok .lc{color:#C9A84C;animation:hwx-glow 1.4s ease-in-out infinite;}
@keyframes hwx-glow{50%{filter:drop-shadow(0 0 6px rgba(201,168,76,.9));}}
.hwx.dark .hwx-dev b{color:#fff;} .hwx.dark .hwx-st{background:rgba(255,255,255,.08);color:#C9D2CD;} .hwx.dark .hwx-ph{border-color:rgba(255,255,255,.12);}
@media (max-width:1100px){
  .hwx-track{flex-wrap:wrap;justify-content:center;row-gap:20px;}
  .hwx-link{display:none;}
}
@media (max-width:600px){
  .hwx-dev{width:46%;} .hwx-ph{width:100%;height:110px;}
  .pp-img{height:80px;}
}
@media (prefers-reduced-motion:reduce){ .pos-prod.pp,.ind-chip,.hwx-fx::before,.hwx-fx::after,.hwx-link.go i{animation:none !important;} }

/* ---------- about photos ---------- */
.about-photos{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;margin-top:26px;}
.about-photos figure{margin:0;position:relative;border-radius:22px;overflow:hidden;min-height:260px;background:#E8EEEA;}
.about-photos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s,transform 6s ease-out;}
.about-photos img.ld{opacity:1;}
.about-photos figure:hover img{transform:scale(1.08);}
.about-photos figcaption{position:absolute;left:14px;bottom:14px;color:#fff;font-weight:700;font-size:13px;padding:6px 12px;border-radius:999px;background:rgba(6,14,11,.45);backdrop-filter:blur(6px);}
@media (max-width:700px){ .about-photos{grid-template-columns:1fr;} }
.photo-credits{font-size:11px;color:#8A9893;margin-top:6px;}
.photo-credits summary{cursor:pointer;}
.photo-credits a{color:inherit;text-decoration:underline;}

/* phones: let split layouts shrink instead of overflowing */
.fp-split > *{min-width:0;}
@media (max-width:900px){ .fp-split{grid-template-columns:minmax(0,1fr) !important;} .stat-tile-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .stat-tile .st-value{font-size:15px;word-break:break-word;} }
@media (max-width:900px){ .pos-frame{grid-template-columns:minmax(0,1fr) !important;} .pos-frame > *{min-width:0;} .pos-grid-mini{grid-template-columns:repeat(2,minmax(0,1fr)) !important;} }