/* ============================================================
   Performance Marketing - paid-media / ROAS dashboard visual
   On top of styles.css + service-page.css
   ============================================================ */

/* live campaign dashboard in the hero */
.pm-board{
  position:relative;z-index:1;margin:clamp(40px,6vw,68px) auto 0;max-width:1040px;
  border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(160deg,#16110e,#0c0d0e);box-shadow:var(--shadow-lg);
  padding:clamp(20px,3vw,28px);
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
}
.pm-board::before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(55% 60% at 85% 0%,rgba(244,81,30,.20),transparent 60%);}

/* KPI tiles */
.pm-kpi{position:relative;z-index:1;background:#fff;border-radius:13px;padding:18px 20px;box-shadow:0 16px 40px -18px rgba(0,0,0,.5);}
.pm-kpi .k-lab{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.01em;}
.pm-kpi .k-val{font-size:clamp(26px,3vw,34px);font-weight:800;letter-spacing:-.03em;color:var(--ink);margin-top:6px;line-height:1;font-variant-numeric:tabular-nums;}
.pm-kpi .k-val .pre,.pm-kpi .k-val .suf{color:var(--accent);}
.pm-kpi .k-delta{display:inline-flex;align-items:center;gap:4px;margin-top:9px;font-size:12px;font-weight:700;color:#1F8A5B;}
.pm-kpi .k-delta.down{color:#1F8A5B;}
.pm-kpi .k-delta svg{width:13px;height:13px;}

/* wide chart tile spans full width */
.pm-chart{grid-column:1 / -1;position:relative;z-index:1;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:13px;padding:20px 22px;}
.pm-chart-head{display:flex;justify-content:space-between;align-items:center;color:#fff;font-size:13.5px;font-weight:600;margin-bottom:16px;}
.pm-chart-tag{font-size:12px;font-weight:700;color:var(--accent-2);background:rgba(244,81,30,.14);border:1px solid rgba(244,81,30,.3);padding:4px 11px;border-radius:999px;}
.pm-bars{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(8px,1.6vw,16px);height:120px;}
.pm-bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end;}
.pm-bar span{width:100%;max-width:46px;height:0;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#5a5c60,#3a3c40);transition:height .9s cubic-bezier(.2,.7,.2,1);}
.pm-bar.hot span{background:linear-gradient(180deg,var(--accent-2),var(--accent));box-shadow:0 0 26px -4px rgba(244,81,30,.7);}
.pm-bar i{font-size:11px;color:var(--muted-d);font-style:normal;}
.reveal.in .pm-bar span{height:var(--h);}
.pm-bar:nth-child(1) span{transition-delay:.05s;}
.pm-bar:nth-child(2) span{transition-delay:.13s;}
.pm-bar:nth-child(3) span{transition-delay:.21s;}
.pm-bar:nth-child(4) span{transition-delay:.29s;}
.pm-bar:nth-child(5) span{transition-delay:.37s;}
.pm-bar:nth-child(6) span{transition-delay:.45s;}
.pm-bar:nth-child(7) span{transition-delay:.53s;}

@media (max-width:760px){
  .pm-board{grid-template-columns:repeat(2,1fr);}
}

/* ---------- platforms strip ---------- */
.pm-plat{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:820px;margin:clamp(32px,4vw,44px) auto 0;}
.pm-plat .chip{font-weight:600;font-size:15px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:999px;padding:11px 20px;box-shadow:var(--shadow-sm);display:inline-flex;align-items:center;gap:9px;transition:transform .18s,border-color .18s;}
.pm-plat .chip:hover{transform:translateY(-2px);border-color:var(--accent);}
.pm-plat .chip .d{width:9px;height:9px;border-radius:50%;background:var(--accent);}

/* ---------- ROAS guarantee-style band reuse handled by service-page.css ---------- */