/* ============================================================
   Social Media Growth - feed card + engagement visual
   On top of styles.css + service-page.css
   ============================================================ */

.sm-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,30px);
  display:grid;grid-template-columns:340px 1fr;gap:20px;align-items:center;
}
.sm-board::before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(55% 60% at 88% 0%,rgba(244,81,30,.20),transparent 60%);}

/* mock social post */
.sm-post{position:relative;z-index:1;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 20px 50px -18px rgba(0,0,0,.55);}
.sm-post-head{display:flex;align-items:center;gap:10px;padding:13px 15px;}
.sm-ava{width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px;flex:none;}
.sm-post-head .nm{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.1;}
.sm-post-head .hd{font-size:11.5px;color:var(--muted);}
.sm-post-head .more{margin-left:auto;color:var(--muted);font-weight:800;letter-spacing:1px;}
.sm-post-img{height:178px;background:linear-gradient(135deg,#F4511E,#FF6A3D 55%,#ffb38f);position:relative;}
.sm-post-img::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 30% 25%,rgba(255,255,255,.28),transparent 60%);}
.sm-post-actions{display:flex;align-items:center;gap:16px;padding:12px 15px 4px;color:var(--ink);}
.sm-act{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;}
.sm-act svg{width:19px;height:19px;}
.sm-act.heart svg{fill:var(--accent);stroke:var(--accent);animation:smbeat 1.4s ease-in-out infinite;}
@keyframes smbeat{0%,100%{transform:scale(1);}18%{transform:scale(1.22);}36%{transform:scale(1);}}
.sm-post-cap{padding:4px 15px 16px;font-size:12.5px;color:var(--muted);line-height:1.45;}
.sm-post-cap b{color:var(--ink);}

/* engagement metrics */
.sm-metrics{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.sm-metric{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:13px;padding:18px 20px;}
.sm-metric .m-lab{font-size:12.5px;font-weight:600;color:var(--muted-d);}
.sm-metric .m-val{font-size:clamp(26px,3vw,34px);font-weight:800;letter-spacing:-.03em;color:#fff;margin-top:6px;line-height:1;font-variant-numeric:tabular-nums;}
.sm-metric .m-val .suf,.sm-metric .m-val .pre{color:var(--accent-2);}
.sm-metric .m-delta{margin-top:8px;font-size:12px;font-weight:700;color:#3fbf6f;display:inline-flex;align-items:center;gap:4px;}
.sm-metric.wide{grid-column:1 / -1;}
/* follower mini-chart */
.sm-spark{display:flex;align-items:flex-end;gap:5px;height:46px;margin-top:12px;}
.sm-spark i{flex:1;border-radius:4px 4px 1px 1px;background:linear-gradient(180deg,var(--accent-2),var(--accent));height:0;transition:height .9s cubic-bezier(.2,.7,.2,1);}
.reveal.in .sm-spark i{height:var(--h);}
.sm-spark i:nth-child(1){transition-delay:.05s;}
.sm-spark i:nth-child(2){transition-delay:.12s;}
.sm-spark i:nth-child(3){transition-delay:.19s;}
.sm-spark i:nth-child(4){transition-delay:.26s;}
.sm-spark i:nth-child(5){transition-delay:.33s;}
.sm-spark i:nth-child(6){transition-delay:.40s;}
.sm-spark i:nth-child(7){transition-delay:.47s;}
.sm-spark i:nth-child(8){transition-delay:.54s;}

/* platforms strip (reuse pm-plat-like) */
.sm-plat{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:760px;margin:clamp(32px,4vw,44px) auto 0;}
.sm-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;}
.sm-plat .chip:hover{transform:translateY(-2px);border-color:var(--accent);}
.sm-plat .chip .d{width:9px;height:9px;border-radius:50%;background:var(--accent);}

@media (max-width:820px){
  .sm-board{grid-template-columns:1fr;}
  .sm-post{max-width:360px;margin-inline:auto;}
}
@media (max-width:480px){
  .sm-metrics{grid-template-columns:1fr;}
}