/* =========================================================================
   placeholders.css — on-brand stand-ins for the missing visual assets
   (videos, app mockups, card, avatars, flags, badges). Swap these for real
   media later; the class names are the integration points.
   ========================================================================= */

/* Generic image placeholder: neutral grey gradient + soft grain + label */
.ph-img {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 20% 10%, rgba(255,255,255,.5), transparent 50%),
    linear-gradient(135deg, #e9e9ec 0%, #cfcfd4 55%, #bdbdc4 100%);
  border-radius: var(--radius-card);
  color: var(--orange-900);
  isolation: isolate;
}
.ph-img::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 2px, transparent 2px 7px);
  mix-blend-mode: overlay;
}
.ph-img[data-label]::before {
  content: attr(data-label);
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  opacity: .85; text-align: center; padding: 12px; z-index: 1;
}
.ph-img.is-light {
  background:
    radial-gradient(120% 120% at 80% 0%, #fff, transparent 55%),
    linear-gradient(160deg, #f4f4f5, #e6e6ea);
  color: var(--orange-900);
}
.ph-img.is-dark {
  background:
    radial-gradient(120% 100% at 50% 0%, #2a2a2e, transparent 60%),
    linear-gradient(160deg, #161618, var(--surface-dark));
  color: #fff;
}

/* ---- Phone mockup -------------------------------------------------------- */
.ph-phone {
  --w: 280px;
  position: relative;
  width: var(--w);
  aspect-ratio: 9 / 19.5;
  border-radius: calc(var(--w) * .14);
  background: #0c0c0e;
  padding: calc(var(--w) * .035);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.5),
              inset 0 0 0 2px rgba(255,255,255,.06);
}
.ph-phone .screen { /* light app screen, Plasma-style */
  position: relative;
  width: 100%; height: 100%;
  border-radius: calc(var(--w) * .11);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, #ffffff, transparent 60%),
    linear-gradient(180deg, #fafafa 0%, #ececed 100%);
}
.ph-phone .screen::before { /* notch */
  content: "";
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 34%; height: calc(var(--w) * .05);
  background: #0c0c0e; border-radius: 999px; z-index: 2;
}
.ph-phone .ui {
  position: absolute; inset: 0;
  padding: 16% 9% 10%;
  display: flex; flex-direction: column; gap: 9px;
}
.ph-phone .ui .bar { height: 12px; border-radius: 999px; background: rgba(10,10,10,.16); }
.ph-phone .ui .bar.sm { width: 40%; height: 8px; opacity: .6; }
.ph-phone .ui .bar.md { width: 70%; }
.ph-phone .ui .pill {
  margin-top: auto; height: 46px; border-radius: 14px;
  background: var(--orange-900); /* one solid dark "button" on the screen */
}

/* ---- Payment card -------------------------------------------------------- */
.ph-card {
  --w: 320px;
  position: relative;
  width: var(--w);
  aspect-ratio: 1.585;          /* ISO/IEC 7810 ID-1 */
  border-radius: calc(var(--w) * .06);
  padding: calc(var(--w) * .075);
  color: #fff;
  /* Kept colourful on purpose (per request) via --card-accent. */
  background:
    radial-gradient(140% 120% at 85% -20%, #ff9a73, transparent 55%),
    linear-gradient(135deg, var(--card-accent) 0%, #c4250f 100%);
  box-shadow: 0 24px 60px -18px rgba(0,0,0,.4);
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden;
}
.ph-card::after { /* sheen */
  content: ""; position: absolute; top: -40%; left: -10%;
  width: 60%; height: 180%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform: rotate(20deg);
}
.ph-card .chip {
  width: calc(var(--w) * .13); height: calc(var(--w) * .1);
  border-radius: 6px;
  background: linear-gradient(135deg, #ffe7b3, #e0a94a);
}
.ph-card .brand { font-weight: var(--fw-semi); letter-spacing: .12em; font-size: calc(var(--w) * .07); }
.ph-card .number { font-variant-numeric: tabular-nums; letter-spacing: .14em; font-size: calc(var(--w) * .055); opacity: .92; }

/* ---- Avatar (testimonials) ---------------------------------------------- */
.ph-avatar {
  display: inline-grid; place-items: center;
  width: 48px; height: 48px; border-radius: 100%;
  color: #fff; font-weight: var(--fw-medium); font-size: 16px;
  background: linear-gradient(135deg, #6b6b72, #9a9aa2);
}
.ph-avatar.alt-1 { background: linear-gradient(135deg, var(--blue), #9bc0ff); }
.ph-avatar.alt-2 { background: linear-gradient(135deg, #7a4dff, #c3a6ff); }
.ph-avatar.alt-3 { background: linear-gradient(135deg, #1fb47a, #8fe6c4); }

/* ---- Currency flag chips ------------------------------------------------- */
.ph-flag {
  width: 24px; height: 24px; border-radius: 100%;
  display: inline-grid; place-items: center;
  font-size: 9px; font-weight: var(--fw-semi); color: #fff;
  background: var(--blue);
}
.ph-flag.eur { background: #1d4ed8; }
.ph-flag.gbp { background: #b91c3c; }
.ph-flag.usd { background: #15803d; }

/* ---- Store badges (drawn, see icons.svg for the real shapes) ------------ */
.ph-badge {
  display: inline-flex; align-items: center; gap: 8px;
  height: 48px; padding: 0 20px; border-radius: 999px;  /* pill */
  background: var(--orange-900); color: #fff;
  font-size: 11px; line-height: 1.1;
}
.ph-badge .store-eyebrow {
  display: block;
  font-size: 9px;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .8;
}
.ph-badge .store-name { display: block; font-size: 15px; font-weight: var(--fw-medium); }
.ph-badge.is-outline { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }

/* ---- Logo wordmark ------------------------------------------------------- */
.logo {
  font-family: var(--font-display);
  font-weight: var(--fw-semi);
  letter-spacing: .02em;
  font-size: 22px;
  display: inline-flex; align-items: center; gap: 8px;
}
.logo .mark {
  /* image mark (assets/logo1.png) — its own colours, just size + clip it */
  width: 26px; height: 26px; border-radius: 7px;
  display: block; object-fit: cover;
}