/* =========================================================
   SMM.CSS — FINAL — Social Media Marketing page
   Load AFTER index.css, menu.css, footer.css
   FIX: removed the max-height cap that could cut off cards.
   Sections are at least one laptop screen tall and grow if needed.
========================================================= */

.smm-sec {
  --k: min(1vw, 1.78vh, 17px);
  --o: #ff6b00;
  --fs-title: clamp(2rem, calc(var(--k) * 3.6), 3.8rem);
  --fs-copy: clamp(0.88rem, calc(var(--k) * 1.1), 1.08rem);
  --fs-h3: clamp(0.85rem, calc(var(--k) * 1.15), 1.1rem);
  --fs-p: clamp(0.72rem, calc(var(--k) * 0.9), 0.92rem);
  --gap: calc(var(--k) * 0.9);
  --ic: clamp(40px, calc(var(--k) * 3.8), 54px);

  position: relative; isolation: isolate; overflow: hidden;
  min-height: calc(100vh - 80px);
  height: auto;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(36px, 5vh, 52px) 0 clamp(20px, 3vh, 28px);
  background: #060914; color: #fff;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  box-sizing: border-box;
}
@supports (height: 100svh) { .smm-sec { min-height: calc(100svh - 80px); } }
.smm-sec *, .smm-sec *::before, .smm-sec *::after { box-sizing: border-box; }

/* hero */
.smm-sec--hero { min-height: max(780px, 100vh); padding-top: max(104px, calc(var(--k) * 7)); padding-bottom: 40px; }

.smm-sec > .wrap { position: relative; z-index: 2; flex: 1; width: 100%; display: flex; flex-direction: column; justify-content: center; }
.smm-sec > .wrap > .smm-banner { margin-top: auto; }
.smm-sec__body { max-width: min(60%, 780px); padding-bottom: calc(var(--k) * 0.8); }
.smm-sec__extra { margin-top: auto; padding-top: calc(var(--k) * 2); }

.smm-sec__bg {
  position: absolute; inset: 0; z-index: -2;
  /* full height of the section is always visible (no crop, no zoom); artwork anchored right */
  background: var(--bg, none) right center / auto 100% no-repeat,
    radial-gradient(circle at 78% 38%, #15327f 0, #0a1233 38%, #060914 70%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24%);
          mask-image: linear-gradient(90deg, transparent 0, #000 24%);
}
.smm-sec__shade {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(6,9,20,.94) 0, rgba(6,9,20,.72) 34%, rgba(6,9,20,0) 64%),
              linear-gradient(0deg, rgba(6,9,20,.85) 0, rgba(6,9,20,0) 26%);
}

/* ---------- typography ---------- */
.smm-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 var(--k); font: 500 .8rem/1.2 'IBM Plex Mono', monospace; letter-spacing: .15em; text-transform: uppercase; color: #e6e6e6; }
.smm-eyebrow::before { content: ''; width: 40px; height: 2px; background: var(--o); flex: none; }
.smm-title { font-family: var(--display); font-weight: 800; color: #fff; margin: 0 0 calc(var(--k) * .9); font-size: var(--fs-title); line-height: 1.03; letter-spacing: -.015em; text-shadow: 0 2px 20px rgba(0,0,0,.55); }
.smm-title span { display: block; color: var(--o); }
.smm-title em { display: block; font-style: normal; font-weight: 500; font-size: .78em; color: #fff; }
.smm-lead { font-size: clamp(.95rem, calc(var(--k) * 1.2), 1.15rem); font-weight: 600; margin: 0 0 6px; }
.smm-copy { font-size: var(--fs-copy); line-height: 1.45; color: #dbe3f5; max-width: 580px; margin: 0 0 calc(var(--k) * .7); }

/* ---------- buttons ---------- */
.smm-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: calc(var(--k) * 1.2); }
.smm-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 10px; padding: calc(var(--k) * .9) calc(var(--k) * 1.8); min-height: 44px; border-radius: 999px; font: 700 clamp(.88rem, calc(var(--k) * 1), 1rem)/1 var(--display); color: #fff; text-decoration: none; transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, background .3s; }
.smm-btn--primary { background: linear-gradient(90deg, #ff5a00, #ff8a1f); box-shadow: 0 0 0 1px rgba(255,140,40,.9), 0 0 22px rgba(255,107,0,.5); }
.smm-btn--primary:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px #ff8a1f, 0 0 42px rgba(255,107,0,.85), 0 12px 26px rgba(0,0,0,.5); }
.smm-btn--primary i { transition: transform .3s; }
.smm-btn--primary:hover i { transform: translateX(5px); }
.smm-btn--ghost { background: rgba(8,16,48,.7); border: 1.5px solid #3a8dff; box-shadow: 0 0 18px rgba(58,141,255,.4), inset 0 0 14px rgba(58,141,255,.12); }
.smm-btn--ghost:hover { transform: translateY(-3px); background: rgba(20,50,140,.7); box-shadow: 0 0 32px rgba(58,141,255,.8), 0 12px 26px rgba(0,0,0,.5); }
.smm-btn--ghost i { font-size: 1.4rem; }

/* ---------- brand tiles ---------- */
.smm-bt { --s: clamp(32px, calc(var(--k) * 2.5), 40px); width: var(--s); height: var(--s); flex: none; border-radius: 28%; display: grid; place-items: center; color: #fff !important; font-size: calc(var(--s) * .52); background: var(--g); box-shadow: 0 6px 18px rgba(0,0,0,.45), 0 0 16px rgba(255,255,255,.12); transition: transform .3s, box-shadow .3s; }
.bt-ig, .smm-strip .bt-ig { --g: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important; }
.bt-fb, .smm-strip .bt-fb { --g: linear-gradient(160deg, #3b8bff, #1456d8) !important; }
.bt-in, .smm-strip .bt-in { --g: linear-gradient(160deg, #1c9cf2, #0a5fc4) !important; }
.bt-yt, .smm-strip .bt-yt { --g: linear-gradient(160deg, #ff3b3b, #d90000) !important; }
.bt-pi, .smm-strip .bt-pi { --g: linear-gradient(160deg, #f2294a, #c8001e) !important; }

.smm-strip { list-style: none; display: flex; flex-wrap: nowrap; margin: calc(var(--k) * 2) 0 0; padding: 0; }
.smm-strip li { flex: none; white-space: nowrap; display: flex; align-items: center; gap: 10px; padding: 0 calc(var(--k) * 1.4); border-left: 1px solid rgba(255,255,255,.18); font-size: .82rem; font-weight: 600; transition: transform .3s; }
.smm-strip li:first-child { border-left: 0; padding-left: 0; }
.smm-strip li:hover { transform: translateY(-3px); }
.smm-strip li:hover .smm-bt { transform: rotate(-8deg) scale(1.1); box-shadow: 0 0 22px rgba(255,107,0,.8); }

/* ---------- cards ---------- */
.smm-grid { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: var(--gap); margin-top: calc(var(--k) * 1.4); max-width: 650px; }
.smm-card {
  --c: #ff6b00; position: relative; overflow: hidden; min-width: 0; min-height: 88px;
  display: flex; align-items: center; gap: var(--k); padding: 14px 18px; border-radius: 14px; border: 1.5px solid var(--c);
  background: #0a1030;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 20%, #0a1030) 0, #070c22 78%);
  box-shadow: 0 0 20px rgba(255,255,255,.08);
  box-shadow: 0 0 20px color-mix(in srgb, var(--c) 42%, transparent), inset 0 0 20px color-mix(in srgb, var(--c) 14%, transparent);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}
.smm-card:hover { transform: translateY(-3px); box-shadow: 0 10px 34px color-mix(in srgb, var(--c) 70%, transparent), inset 0 0 26px color-mix(in srgb, var(--c) 26%, transparent); }
.smm-ic {
  width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--c); font-size: 1.25rem;
  background: #0b1230;
  background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--c) 45%, #0e1a42) 0%, color-mix(in srgb, var(--c) 15%, #070c22) 100%);
  border: 1.5px solid var(--c);
  border: 1.5px solid color-mix(in srgb, var(--c) 80%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--c) 50%, transparent);
  transition: transform .35s ease, box-shadow .35s ease;
}
.smm-card:hover .smm-ic { transform: scale(1.1) rotate(-6deg); box-shadow: 0 0 26px color-mix(in srgb, var(--c) 90%, transparent); }
.smm-card h3 { font: 700 1.02rem/1.15 var(--display); color: #fff; margin: 0 0 3px; transition: color .3s ease; }
.smm-card:hover h3 { color: var(--c); }
.smm-card p { font-size: .82rem; line-height: 1.3; color: #d6dff5; margin: 0; }

/* ---------- banner (always visible, sits above the overlay) ---------- */
.smm-sec .smm-banner, .smm-banner {
  display: inline-flex; align-items: center; gap: 14px; width: fit-content; max-width: 100%;
  margin-top: calc(var(--k) * 1.4); padding: 12px 20px; border-radius: 12px; border: 1.5px solid #ff6b00;
  background: #060c22; box-shadow: 0 0 24px rgba(255,107,0,.45), inset 0 0 16px rgba(255,107,0,.2);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  position: relative; z-index: 5; transition: box-shadow .4s ease;
}
.smm-banner:hover { box-shadow: 0 0 38px rgba(255,107,0,.65), inset 0 0 22px rgba(255,107,0,.25); }
.smm-banner__ic { padding-right: 14px; border-right: 1.5px solid rgba(255,255,255,.35); font-size: clamp(1.3rem, calc(var(--k) * 2.2), 1.9rem); color: #ff6b00; transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.smm-banner:hover .smm-banner__ic { transform: rotate(-12deg) scale(1.1); }
.smm-banner p { font-family: var(--display); font-size: clamp(.92rem, calc(var(--k) * 1.25), 1.15rem); font-weight: 600; color: #fff; margin: 0; text-shadow: 0 2px 10px rgba(0,0,0,.9); }
.smm-banner b { color: #ff8a1f; font-weight: 800; text-shadow: 0 0 12px rgba(255,107,0,.7); }
.smm-banner p i { margin: 0 4px; color: #ff8a1f; font-size: .85em; }

/* ---------- FAQ ---------- */
.smm-faq { background: #eef3ff; color: #0b1050; }
.smm-faq .smm-sec__bg { right: auto; width: 62%; background-position: left center; -webkit-mask-image: linear-gradient(90deg, #000 72%, transparent); mask-image: linear-gradient(90deg, #000 72%, transparent); }
.smm-faq .smm-sec__shade { display: none; }
.smm-faq > .wrap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: calc(var(--k) * 3); align-items: center; }
.smm-faq__list { display: flex; flex-direction: column; gap: calc(var(--k) * .55); }
.smm-faq details { --c: #2f6bff; border-radius: 12px; border: 1px solid #dbe3fa; background: rgba(255,255,255,.9); box-shadow: 0 2px 8px rgba(40,70,200,.06); transition: transform .3s, box-shadow .3s; }
.smm-faq details:hover { transform: translateX(-4px); box-shadow: 0 8px 24px rgba(40,70,200,.16); }
.smm-faq summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; padding: calc(var(--k) * .5) 12px; font: 700 clamp(.8rem, calc(var(--k) * .95), .95rem)/1.25 var(--display); color: #0b1050; }
.smm-faq summary::-webkit-details-marker { display: none; }
.smm-faq summary::after { content: '\2b'; font: 900 .85rem 'Font Awesome 6 Free'; margin-left: auto; color: #0b1050; }
.smm-faq details[open] summary::after { content: '\f068'; }
.smm-faq summary:hover .smm-faq__n { transform: scale(1.1) rotate(-4deg); }
.smm-faq__n { width: clamp(32px, calc(var(--k) * 2.5), 38px); height: clamp(32px, calc(var(--k) * 2.5), 38px); flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--c); color: #fff; font: 800 .88rem/1 var(--display); transition: transform .3s; }
.smm-faq details p { margin: 0; padding: 2px 16px 14px 62px; font-size: clamp(.78rem, calc(var(--k) * .9), .9rem); line-height: 1.5; color: #3b4372; }

/* ---------- numbered / metric / stat / photo cards ---------- */
.smm-card--n .smm-card__n { position: absolute; top: 9px; right: 14px; z-index: 2; font: 800 1.15rem/1 var(--display); color: var(--c); text-shadow: 0 0 12px color-mix(in srgb, var(--c) 80%, transparent); }
.smm-card--n .smm-card__t { padding-right: 26px; }
.smm-card--m, .smm-card--s { min-height: 104px; }
.smm-card--m .smm-card__t, .smm-card--s .smm-card__t { position: relative; z-index: 2; padding-right: 54px; }
.smm-bars { position: absolute; right: 14px; bottom: 12px; width: 46px; height: 44px; display: flex; align-items: flex-end; gap: 3px; }
.smm-bars i { flex: 1; border-radius: 2px 2px 0 0; background: linear-gradient(to top, color-mix(in srgb, var(--c) 40%, #070c22), var(--c)); box-shadow: 0 0 8px color-mix(in srgb, var(--c) 60%, transparent); transform-origin: bottom; }
.smm-bars i:nth-child(1) { height: 28%; } .smm-bars i:nth-child(2) { height: 40%; } .smm-bars i:nth-child(3) { height: 36%; }
.smm-bars i:nth-child(4) { height: 56%; } .smm-bars i:nth-child(5) { height: 74%; } .smm-bars i:nth-child(6) { height: 96%; }
.smm-card:hover .smm-bars i { filter: brightness(1.3); }
.smm-val { display: block; font: 800 clamp(1.3rem, calc(var(--k) * 2.1), 1.8rem)/1.1 var(--display); color: #fff; }
.smm-delta { display: block; font: 700 .8rem/1.3 var(--display); color: #2ee283; text-shadow: 0 0 10px rgba(46,226,131,.5); }

.smm-sec__body:has(.smm-grid[style*="--cols:3"]) { max-width: min(68%, 900px); }
.smm-grid[style*="--cols:3"] { max-width: min(62vw, 860px); }
.smm-sec__body:has(.smm-card--p) { max-width: min(64%, 860px); }
.smm-grid:has(.smm-card--p) { max-width: min(50vw, 800px); }
.smm-card--p { min-height: 92px; }
.smm-card--p::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 38%; z-index: 0; background: var(--img) center / cover no-repeat; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 62%); mask-image: linear-gradient(90deg, transparent 0, #000 62%); opacity: .92; transition: transform .6s ease, opacity .35s ease; }
.smm-card--p:hover::before { transform: scale(1.08); opacity: 1; }
.smm-card--p .smm-ic, .smm-card--p .smm-card__t { position: relative; z-index: 2; }
.smm-card--p .smm-card__t { max-width: 64%; }

/* ---------- platforms + process rows ---------- */
.smm-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); }
.smm-plat, .smm-step { --c: #ff6b00; position: relative; min-width: 0; text-align: left; border: 1.5px solid var(--c); border-radius: 14px; background: #0a1030; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 18%, #0a1030) 0, #070c22 80%); box-shadow: 0 0 20px color-mix(in srgb, var(--c) 40%, transparent), inset 0 0 18px color-mix(in srgb, var(--c) 12%, transparent); transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease; }
.smm-plat:hover, .smm-step:hover { transform: translateY(-7px); box-shadow: 0 12px 38px color-mix(in srgb, var(--c) 70%, transparent), inset 0 0 26px color-mix(in srgb, var(--c) 24%, transparent); }
.smm-plat h3, .smm-step h3 { font: 700 clamp(.95rem, calc(var(--k) * 1.2), 1.1rem)/1.15 var(--display); color: #fff; margin: 0 0 4px; transition: color .3s; }
.smm-plat p, .smm-step p { font-size: clamp(.72rem, calc(var(--k) * .88), .86rem); line-height: 1.35; color: #d6dff5; margin: 0; }
.smm-plat:hover h3, .smm-step:hover h3 { color: var(--c); }
.smm-plat { overflow: hidden; display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 16px; }
.smm-plat .smm-bt { --s: clamp(38px, calc(var(--k) * 3), 48px); margin-bottom: 4px; }
.smm-plat:hover .smm-bt { animation: smm-flip .9s ease; box-shadow: 0 0 24px color-mix(in srgb, var(--c) 90%, transparent); }
.smm-step { padding: 14px 14px 16px; }
.smm-step__n { display: block; margin-bottom: 8px; font: 800 clamp(1.8rem, calc(var(--k) * 3), 2.6rem)/1 var(--display); color: var(--c); text-shadow: 0 0 16px color-mix(in srgb, var(--c) 70%, transparent); transition: transform .35s ease; transform-origin: left center; }
.smm-step:hover .smm-step__n { transform: scale(1.14); }
.smm-step h3 { text-transform: uppercase; letter-spacing: .02em; }
.smm-step:not(:last-child)::after { content: '\f054'; font: 900 .85rem 'Font Awesome 6 Free'; position: absolute; right: calc(var(--gap) / -2 - 7px); top: 50%; transform: translateY(-50%); width: 14px; height: 14px; display: grid; place-items: center; color: var(--c); z-index: 3; }
.smm-sec__extra .smm-banner { margin-top: calc(var(--k) * 1.4); }

/* ---------- CTA logo ---------- */
.smm-logo { display: flex; align-items: center; gap: 16px; margin-top: calc(var(--k) * 2.4); align-self: flex-start; }
.smm-logo img { height: clamp(40px, calc(var(--k) * 3.4), 56px); width: auto; display: block; }
.smm-logo span { padding-left: 16px; border-left: 1.5px solid rgba(255,255,255,.3); font: 500 .7rem/1.5 'IBM Plex Mono', monospace; letter-spacing: .24em; text-transform: uppercase; color: #cfdcf8; }

/* =========================================================
   MOTION
========================================================= */
@keyframes smm-drift { from { transform: scale(1.02) translate3d(0,0,0); } to { transform: scale(1.08) translate3d(-1.2%,-.8%,0); } }
@keyframes smm-line  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes smm-glow  { 0%,100% { box-shadow: 0 0 24px rgba(255,107,0,.45), inset 0 0 16px rgba(255,107,0,.2); } 50% { box-shadow: 0 0 38px rgba(255,107,0,.65), inset 0 0 22px rgba(255,107,0,.28); } }
@keyframes smm-btnpulse { 0%,100% { box-shadow: 0 0 0 1px rgba(255,140,40,.9), 0 0 22px rgba(255,107,0,.45); } 50% { box-shadow: 0 0 0 1px #ff8a1f, 0 0 38px rgba(255,107,0,.8); } }
@keyframes smm-shine { to { transform: translateX(420%) skewX(-18deg); } }
@keyframes smm-flip  { from { transform: perspective(500px) rotateY(0); } to { transform: perspective(500px) rotateY(360deg); } }
@keyframes smm-up    { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes smm-bar   { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.smm-card::after, .smm-plat::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 34%; z-index: 1; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent); transform: translateX(-120%) skewX(-18deg); }
.smm-btn::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transform: translateX(-120%) skewX(-18deg); }
@media (hover: hover) {
  .smm-card:hover::after, .smm-plat:hover::after { animation: smm-shine .9s ease; }
  .smm-btn:hover::before { animation: smm-shine .8s ease; }
  .smm-card:hover .smm-ic { animation: smm-flip .9s ease; }
}

/* scroll reveal (animation, so hover transforms still work) */
.smm-js .smm-sec:not(.is-in) [data-r]:not(.smm-banner) { opacity: 0; }
.smm-sec.is-in [data-r]:not(.smm-banner) { animation: smm-up .7s cubic-bezier(.2,.8,.2,1) backwards; animation-delay: calc(var(--i, 0) * 80ms); }
.smm-js .smm-sec:not(.is-in) .smm-banner { opacity: 0; }
.smm-js .smm-sec:not(.is-in) .smm-bars i { transform: scaleY(0); }
.smm-sec.is-in .smm-bars i { animation: smm-bar .7s cubic-bezier(.2,.8,.2,1) backwards; }
.smm-sec.is-in .smm-bars i:nth-child(2) { animation-delay: .06s; } .smm-sec.is-in .smm-bars i:nth-child(3) { animation-delay: .12s; }
.smm-sec.is-in .smm-bars i:nth-child(4) { animation-delay: .18s; } .smm-sec.is-in .smm-bars i:nth-child(5) { animation-delay: .24s; }
.smm-sec.is-in .smm-bars i:nth-child(6) { animation-delay: .3s; }

@media (prefers-reduced-motion: no-preference) {
  .smm-sec.is-in .smm-eyebrow::before { transform-origin: left center; animation: smm-line .8s .15s cubic-bezier(.2,.8,.2,1) backwards; }
  .smm-sec.is-in .smm-banner { animation: smm-glow 3.6s 1s ease-in-out infinite; }
  .smm-btn--primary { animation: smm-btnpulse 2.8s ease-in-out infinite; }
  .smm-btn--primary:hover { animation: none; }
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 1100px) {
  /* tablet + phone: show the WHOLE 16:9 picture at the top (no crop, no zoom), text starts under it */
  .smm-sec__bg { inset: 0 0 auto 0; height: auto; aspect-ratio: 16 / 9; background-size: 100% 100%; background-position: center top; -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%); mask-image: linear-gradient(180deg, #000 58%, transparent 100%); }
  .smm-sec__shade { display: none; }
  .smm-sec { --k: 1.15vw; min-height: 0; padding-top: 0; padding-bottom: 28px; }
  .smm-sec > .wrap { padding-top: calc(56.25vw * .8); }
  .smm-sec--hero { padding-top: 88px; min-height: 0; }
  .smm-sec--hero .smm-sec__bg { top: 88px; }
  .smm-sec__body, .smm-sec__body:has(.smm-card--p), .smm-sec__body:has(.smm-grid[style*="--cols:3"]) { max-width: 100%; }
  .smm-grid, .smm-grid[style*="--cols:3"], .smm-grid:has(.smm-card--p) { max-width: 100%; }
  .smm-grid[style*="--cols:3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .smm-banner { width: 100%; }
  .smm-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .smm-step:not(:last-child)::after { display: none; }
  .smm-faq > .wrap { grid-template-columns: 1fr; }
  .smm-faq > .wrap { padding-top: 0; }
  .smm-faq .smm-sec__bg { background-size: contain; background-position: center top; aspect-ratio: auto; width: 100%; height: 40%; bottom: auto; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
  .smm-faq__head { min-height: clamp(260px, 40vw, 380px); }
}
@media (max-width: 640px) {
  .smm-sec { --k: 2.2vw; }
  .smm-strip { flex-wrap: wrap; row-gap: 12px; }
  .smm-btns { flex-direction: column; align-items: stretch; }
  .smm-btn { justify-content: center; }
  .smm-grid { grid-template-columns: 1fr !important; }
  .smm-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .smm-card--p .smm-card__t { max-width: 66%; }
  .smm-banner { flex-direction: column; text-align: center; }
  .smm-banner__ic { border-right: 0; padding-right: 0; }
  .smm-logo { flex-direction: column; align-items: flex-start; gap: 10px; }
  .smm-logo span { padding-left: 0; border-left: 0; }
  .smm-faq details p { padding-left: 16px; }
}
@media (max-width: 420px) { .smm-row { grid-template-columns: 1fr; } }
@media (hover: none) { .smm-card:hover, .smm-plat:hover, .smm-step:hover, .smm-strip li:hover, .smm-faq details:hover, .smm-btn:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .smm-sec__bg, .smm-btn--primary, .smm-banner { animation: none !important; }
  .smm-sec.is-in [data-r]:not(.smm-banner), .smm-sec.is-in .smm-bars i { animation: none; }
  .smm-js .smm-sec:not(.is-in) [data-r], .smm-js .smm-sec:not(.is-in) .smm-banner { opacity: 1; }
  .smm-js .smm-sec:not(.is-in) .smm-bars i { transform: none; }
  .smm-card::after, .smm-plat::after, .smm-btn::before { display: none; }
  .smm-card, .smm-plat, .smm-step, .smm-btn, .smm-faq details { transition: none; }
}

/* =========================================================
   ALTERNATING SECTIONS: picture / blank / picture / blank ...
   Hero (picture) > Trust (blank) > Services (picture) > Platforms (blank)
   > Creative (picture) > Strategy (blank) > Metrics (picture) > Process (blank)
   > Portfolio (picture) > Industries (blank) > Reporting (picture)
   > FAQ (blank, light) > Final CTA (picture)
   To switch a section, add or remove 'plain'=>true in the PHP data list.
   Blank sections have no picture, so the content is centred and uses the full width.
========================================================= */
.smm-sec--plain {
  background:
    radial-gradient(ellipse 40% 50% at 0% 0%, rgba(47, 123, 255, .22), transparent 70%),
    radial-gradient(ellipse 32% 45% at 100% 0%, rgba(255, 107, 0, .16), transparent 70%),
    radial-gradient(ellipse 30% 40% at 100% 100%, rgba(255, 107, 0, .12), transparent 70%),
    #060914;
}
/* faint grid that fades at the edges */
.smm-sec--plain::before {
  content: '';
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(120, 160, 255, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 160, 255, .08) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 15%, transparent 80%);
          mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 15%, transparent 80%);
}
/* soft twinkling dots in two corners (no circles) */
.smm-dots {
  position: absolute; z-index: -1; pointer-events: none;
  background-size: 27px 27px;
  animation: smm-twinkle 3.5s ease-in-out infinite alternate;
}
.smm-dots--tr { top: 40px; right: 60px; width: 216px; height: 108px;
  background-image: radial-gradient(circle, rgba(255, 107, 0, .85) 1.6px, transparent 2.3px);
  -webkit-mask-image: linear-gradient(270deg, #000 40%, transparent); mask-image: linear-gradient(270deg, #000 40%, transparent); }
.smm-dots--bl { bottom: 40px; left: 30px; width: 162px; height: 81px; animation-delay: -1.6s;
  background-image: radial-gradient(circle, rgba(60, 130, 255, .85) 1.6px, transparent 2.3px);
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent); mask-image: linear-gradient(90deg, #000 40%, transparent); }
@keyframes smm-twinkle { from { opacity: .35; } to { opacity: 1; } }

/* centred heading, full-width cards */
.smm-sec--plain .smm-sec__body { max-width: 1240px; width: 100%; margin: 0 auto; text-align: center; }
.smm-sec--plain .smm-eyebrow { justify-content: center; }
.smm-sec--plain .smm-copy { max-width: 760px; margin-left: auto; margin-right: auto; }
.smm-sec--plain .smm-grid { max-width: none; text-align: left; }
.smm-sec--plain > .wrap > .smm-banner,
.smm-sec--plain .smm-sec__extra .smm-banner { align-self: center; margin-left: auto; margin-right: auto; }
.smm-sec--plain .smm-sec__extra { width: 100%; max-width: 1400px; margin-left: auto; margin-right: auto; display: flex; flex-direction: column; }

/* laptops + desktops: more cards per row */
@media (min-width: 1101px) {
  .smm-sec--plain .smm-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }   /* 4 cards */
  .smm-sec--plain .smm-grid:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* 6 cards */
  .smm-sec--plain .smm-grid:has(> :nth-child(8):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* 8 photo cards */
}
@media (min-width: 1300px) {
  .smm-sec--plain .smm-grid:has(> :nth-child(8):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .smm-sec--plain .smm-card--p .smm-card__t { max-width: 70%; }
}

/* tablets + phones: no picture at the top, so no big empty gap */
@media (max-width: 1100px) {
  .smm-sec--plain { padding-top: 56px; padding-bottom: 40px; }
  .smm-sec--plain > .wrap { padding-top: 0; }
  .smm-dots--tr { right: 16px; width: 140px; }
  .smm-dots--bl { display: none; }
}
@media (max-width: 640px) {
  .smm-sec--plain .smm-banner { align-self: stretch; }
}

@media (prefers-reduced-motion: reduce) { .smm-dots { animation: none; } }


/* =========================================================
   TRUST SECTION ("Attention Is Easy. Trust Takes Strategy.")
   Built like the design: centred heading with lines on both sides,
   glowing curved lines, floating neon icons (target, heart, people,
   dashboard, chart, chat), 4 centred cards, pill callout.
   No picture file needed. Font sizes are not changed.
========================================================= */
#trust.smm-sec--plain {
  background:
    radial-gradient(ellipse 34% 50% at 100% 0%, rgba(47, 123, 255, .32), transparent 70%),
    radial-gradient(ellipse 30% 45% at 0% 45%, rgba(255, 107, 0, .14), transparent 70%),
    radial-gradient(ellipse 30% 40% at 100% 100%, rgba(255, 107, 0, .16), transparent 70%),
    #060914;
}
#trust .smm-dots--tr { display: none; }

/* lines on both sides of the eyebrow */
#trust .smm-eyebrow::after { content: ''; width: 40px; height: 2px; background: var(--o); flex: none; }

/* ---- artwork ---- */
.smm-tr-art { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.smm-tr-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.smm-tr-lines path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 8 10; animation: smm-flow 3s linear infinite; }
.smm-tr-lines .ln-o { stroke: #ff7a1a; filter: drop-shadow(0 0 6px #ff6b00); }
.smm-tr-lines .ln-b { stroke: #2f8bff; filter: drop-shadow(0 0 6px #2f8bff); stroke-dasharray: none; opacity: .8; }
.smm-tr-lines .ln-p { stroke: #8b5cf6; filter: drop-shadow(0 0 6px #8b5cf6); }
.smm-tr-lines .dt-o { fill: #ff8a1f; filter: drop-shadow(0 0 8px #ff6b00); }
.smm-tr-lines .dt-b { fill: #12c7ff; filter: drop-shadow(0 0 8px #12c7ff); }
.smm-tr-lines .dt-p { fill: #a47bff; filter: drop-shadow(0 0 8px #8b5cf6); }
@keyframes smm-flow { to { stroke-dashoffset: -36; } }

/* big target with arrow (left) */
.smm-tr-target {
  position: absolute; left: 4%; top: 13%;
  width: clamp(130px, 13vw, 210px); aspect-ratio: 1;
  display: grid; place-items: center;
  font-size: clamp(110px, 11vw, 180px);
  color: #ff7a1a;
  filter: drop-shadow(0 0 22px rgba(255, 107, 0, .75));
  animation: smm-bob 5s ease-in-out infinite;
}
.smm-tr-target > i:first-child { background: linear-gradient(135deg, #ffb066, #ff6b00 55%, #b34400); -webkit-background-clip: text; background-clip: text; color: transparent; }
.smm-tr-arrow { position: absolute; right: -8%; top: 8%; font-size: .32em; color: #ffb066; transform: rotate(-135deg) scaleX(-1); filter: drop-shadow(0 0 8px #ff6b00); }

/* small floating tiles */
.smm-tr-tile {
  --tc: 255, 107, 0;
  position: absolute;
  width: clamp(48px, 4.4vw, 70px); aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: 16px;
  font-size: clamp(1.2rem, 1.7vw, 1.8rem);
  color: rgb(var(--tc));
  background: linear-gradient(145deg, rgba(var(--tc), .28), rgba(8, 12, 32, .95) 70%);
  border: 1.5px solid rgba(var(--tc), .8);
  box-shadow: 0 0 22px rgba(var(--tc), .55), inset 0 0 14px rgba(var(--tc), .2);
  animation: smm-bob 4.5s ease-in-out infinite;
}
.smm-tr-tile--heart { left: 18%; top: 8%; transform: rotate(10deg); --tc: 255, 107, 140; animation-delay: -1s; }
.smm-tr-tile--users { left: 15%; top: 40%; --tc: 47, 139, 255; animation-delay: -2.2s; }
.smm-tr-tile--chart { right: 15%; top: 8%; --tc: 20, 216, 180; animation-delay: -1.6s; }
.smm-tr-tile--chat  { right: 4%;  top: 40%; --tc: 139, 92, 246; animation-delay: -3s; }

/* dashboard (right) */
.smm-tr-board {
  position: absolute; right: 5.5%; top: 11%;
  width: clamp(150px, 13vw, 220px); aspect-ratio: 4 / 5;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(139, 92, 246, .25), rgba(10, 14, 40, .95) 65%);
  border: 1.5px solid rgba(139, 92, 246, .8);
  box-shadow: 0 0 30px rgba(139, 92, 246, .5), inset 0 0 20px rgba(139, 92, 246, .2);
  transform: perspective(700px) rotateY(-16deg) rotateZ(4deg);
  animation: smm-bob 6s ease-in-out infinite -2s;
}
.smm-tr-board__bars { position: absolute; right: 12%; bottom: 14%; width: 58%; height: 52%; display: flex; align-items: flex-end; gap: 7%; }
.smm-tr-board__bars i { flex: 1; border-radius: 4px 4px 0 0; background: linear-gradient(to top, #ff6b00, #ffb066); box-shadow: 0 0 12px rgba(255, 107, 0, .7); transform-origin: bottom; animation: smm-grow 3s ease-in-out infinite alternate; }
.smm-tr-board__bars i:nth-child(1) { height: 30%; } .smm-tr-board__bars i:nth-child(2) { height: 50%; animation-delay: .3s; }
.smm-tr-board__bars i:nth-child(3) { height: 70%; animation-delay: .6s; } .smm-tr-board__bars i:nth-child(4) { height: 95%; animation-delay: .9s; }
.smm-tr-board__trend { position: absolute; right: 12%; top: 10%; font-size: clamp(1.6rem, 2.6vw, 2.6rem); color: #a47bff; filter: drop-shadow(0 0 10px #8b5cf6); }
.smm-tr-board__card {
  position: absolute; left: -18%; bottom: 22%; width: 70%;
  padding: 10px 12px; border-radius: 12px;
  display: flex; flex-direction: column; gap: 6px;
  background: rgba(14, 20, 56, .95);
  border: 1.5px solid rgba(47, 139, 255, .8);
  box-shadow: 0 0 20px rgba(47, 139, 255, .5);
}
.smm-tr-board__card i { color: #4d9bff; font-size: 1.1rem; }
.smm-tr-board__card em { height: 5px; border-radius: 4px; background: rgba(77, 155, 255, .6); }
.smm-tr-board__card em + em { width: 60%; }
@keyframes smm-bob  { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes smm-grow { from { transform: scaleY(.75); } to { transform: scaleY(1); } }

/* keep the text clear of the artwork */
#trust .smm-sec__body { max-width: min(1240px, 100%); }
#trust .smm-copy { max-width: 720px; }

/* ---- cards: icon on top, everything centred, coloured wave at the bottom ---- */
#trust .smm-grid { gap: clamp(16px, 1.6vw, 26px); margin-top: calc(var(--k) * 2); }
#trust .smm-card {
  flex-direction: column; justify-content: flex-start; text-align: center;
  gap: 12px; min-height: 0;
  padding: 26px 20px 30px;
  border-radius: 18px;
  background: linear-gradient(170deg, color-mix(in srgb, var(--c) 26%, #0a1030) 0, #070c22 72%);
}
#trust .smm-card::after {               /* glowing wave along the bottom edge */
  content: ''; position: absolute; left: -10%; right: -10%; bottom: -45%;
  height: 70%; z-index: 0; pointer-events: none;
  border-radius: 50% 50% 0 0 / 30% 30% 0 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 40%, transparent), transparent 70%);
  border-top: 1.5px solid color-mix(in srgb, var(--c) 70%, transparent);
  transform: rotate(-4deg);
  transition: transform .5s ease, bottom .5s ease;
}
#trust .smm-card:hover::after { bottom: -38%; transform: rotate(-2deg); }
#trust .smm-card .smm-ic, #trust .smm-card .smm-card__t { position: relative; z-index: 1; }
#trust .smm-ic { width: 60px; height: 60px; font-size: 1.45rem; }
#trust .smm-card:hover { transform: translateY(-8px); }

/* ---- pill callout with two centred lines ---- */
#trust .smm-banner {
  border-radius: 999px;
  padding: 14px 40px 14px 30px;
  min-width: min(720px, 100%);
}
#trust .smm-banner p { flex: 1; text-align: center; font-weight: 500; }
#trust .smm-banner b { display: block; }

/* phones / tablets: smaller artwork only around the heading */
@media (max-width: 1100px) {
  .smm-tr-lines, .smm-tr-board, .smm-tr-tile--users, .smm-tr-tile--chat { display: none; }
  .smm-tr-target { left: -20px; top: 10px; width: 110px; font-size: 90px; opacity: .45; }
  .smm-tr-tile--heart { left: auto; right: 20px; top: 20px; opacity: .7; }
  .smm-tr-tile--chart { right: 20px; top: auto; bottom: 30px; opacity: .6; }
}
@media (max-width: 640px) {
  #trust .smm-banner { border-radius: 22px; padding: 14px 18px; min-width: 0; }
  #trust .smm-banner__ic { border-right: 0; padding-right: 0; }
  .smm-tr-target { width: 80px; font-size: 64px; }
}

/* =========================================================
   FAQ, DARK NEON ("Questions About Social Media? Let's Make It Clear.")
   Left: heading, intro and a glowing question bubble over a phone with
   floating social icons. Right: dark questions with coloured numbers.
========================================================= */
.smm-sec.smm-faq--dark {
  color: #fff;
  background:
    radial-gradient(ellipse 34% 45% at 0% 100%, rgba(255, 107, 0, .22), transparent 70%),
    radial-gradient(ellipse 30% 40% at 100% 0%, rgba(255, 107, 0, .18), transparent 70%),
    radial-gradient(ellipse 30% 40% at 100% 100%, rgba(255, 107, 0, .10), transparent 70%),
    #05070f;
}
.smm-faq--dark .smm-dots--tl { top: 20px; left: 20px; width: 135px; height: 108px;
  background-image: radial-gradient(circle, rgba(255, 107, 0, .8) 1.6px, transparent 2.3px);
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent); mask-image: linear-gradient(90deg, #000 40%, transparent); }
.smm-faq--dark .smm-dots--br { bottom: 30px; right: 20px; width: 135px; height: 108px; animation-delay: -1.8s;
  background-image: radial-gradient(circle, rgba(255, 107, 0, .8) 1.6px, transparent 2.3px);
  -webkit-mask-image: linear-gradient(270deg, #000 40%, transparent); mask-image: linear-gradient(270deg, #000 40%, transparent); }

.smm-faq--dark .smm-title { color: #fff; text-shadow: 0 2px 20px rgba(0, 0, 0, .55); }
.smm-faq--dark .smm-title em { color: #fff; }
.smm-faq--dark .smm-eyebrow { color: #e6e6e6; }
.smm-faq--dark .smm-faq__intro { color: #c9d3ea; max-width: 520px; }
@media (min-width: 1101px) { .smm-faq--dark > .wrap { align-items: center; } }

/* ---- question bubble artwork ---- */
.smm-qa-art { position: relative; width: min(100%, 520px); height: clamp(220px, 24vw, 340px); margin-top: calc(var(--k) * 1.6); }
.smm-qa-phone {
  position: absolute; left: 6%; right: 10%; bottom: 4%; height: 24%;
  border-radius: 26px;
  background: linear-gradient(180deg, #14182a, #05070f);
  border: 2px solid rgba(255, 107, 0, .85);
  box-shadow: 0 0 34px rgba(255, 107, 0, .55), inset 0 0 30px rgba(255, 107, 0, .25);
  transform: perspective(600px) rotateX(58deg) rotateZ(-8deg);
}
.smm-qa-bubble {
  position: absolute; left: 30%; bottom: 20%;
  width: 40%; aspect-ratio: 1.05;
  display: grid; place-items: center;
  border-radius: 28% 28% 28% 6%;
  font-size: clamp(4rem, 7vw, 7rem);
  background: linear-gradient(150deg, #23263a, #0b0d18 70%);
  border: 2px solid rgba(255, 140, 40, .9);
  box-shadow: 0 0 40px rgba(255, 107, 0, .6), inset 0 0 26px rgba(255, 107, 0, .25);
  animation: smm-bob 5s ease-in-out infinite;
}
.smm-qa-bubble i { background: linear-gradient(180deg, #ffc066, #ff6b00); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 14px rgba(255, 107, 0, .8)); }
.smm-qa-bubble::after {                 /* the tail of the speech bubble */
  content: ''; position: absolute; left: 22%; bottom: -14%;
  width: 18%; aspect-ratio: 1;
  background: #0d0f1c;
  border-right: 2px solid rgba(255, 140, 40, .9);
  border-bottom: 2px solid rgba(255, 140, 40, .9);
  transform: rotate(45deg) skew(10deg, 10deg);
}
.smm-qa-ic { --s: clamp(48px, 4.6vw, 70px) !important; position: absolute; font-size: calc(var(--s) * .5) !important; border-radius: 22% !important; animation: smm-bob 4.5s ease-in-out infinite; }
.smm-qa-ic--ig { left: 10%; top: 6%;   transform: rotate(-10deg); box-shadow: 0 0 26px rgba(225, 48, 108, .8) !important; animation-delay: -1s; }
.smm-qa-ic--fb { right: 12%; top: 4%;  transform: rotate(10deg);  box-shadow: 0 0 26px rgba(59, 139, 255, .8) !important; animation-delay: -2s; }
.smm-qa-ic--in { left: 6%;  top: 48%;  transform: rotate(-6deg);  box-shadow: 0 0 26px rgba(28, 156, 242, .8) !important; animation-delay: -3s; }
.smm-qa-ic--yt { right: 8%; top: 52%;  transform: rotate(8deg);   box-shadow: 0 0 26px rgba(255, 59, 59, .8) !important; animation-delay: -1.5s; }

/* ---- dark question cards ---- */
.smm-faq--dark details {
  border: 1.5px solid color-mix(in srgb, var(--c) 55%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 14%, #0a0d1c) 0, #0a0d1c 40%);
  box-shadow: 0 0 16px color-mix(in srgb, var(--c) 22%, transparent);
}
.smm-faq--dark details:hover,
.smm-faq--dark details[open] {
  border-color: var(--c);
  box-shadow: 0 0 26px color-mix(in srgb, var(--c) 50%, transparent), inset 0 0 18px color-mix(in srgb, var(--c) 12%, transparent);
}
.smm-faq--dark summary { color: #fff; }
.smm-faq--dark summary::after { content: '\2b'; color: #fff; transition: transform .3s ease; }
.smm-faq--dark details[open] summary::after { content: '\2b'; transform: rotate(45deg); color: var(--c); }
.smm-faq--dark .smm-faq__n { box-shadow: 0 0 16px color-mix(in srgb, var(--c) 70%, transparent); }
.smm-faq--dark details p { color: #c9d3ea; }
.smm-faq--dark details[open] p { animation: smm-up .4s ease both; }

@media (max-width: 1100px) {
  .smm-faq--dark .smm-faq__head { min-height: 0; margin-bottom: 20px; }
  .smm-qa-art { height: 220px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 640px) {
  .smm-qa-art { height: 180px; }
  .smm-faq--dark .smm-dots--br { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .smm-tr-lines path, .smm-tr-target, .smm-tr-tile, .smm-tr-board, .smm-tr-board__bars i,
  .smm-qa-bubble, .smm-qa-ic { animation: none; }
}


/* =========================================================
   FIX: no big empty gap in blank sections
   (the cards / steps / callout were pushed to the bottom of the screen)
========================================================= */
.smm-sec--plain > .wrap { justify-content: center; }
.smm-sec--plain .smm-sec__extra { margin-top: calc(var(--k) * 2.4); }
.smm-sec--plain > .wrap > .smm-banner { margin-top: calc(var(--k) * 2); }

/* =========================================================
   INDUSTRIES ("B2B or B2C. Every Brand Has a Story.")
   Black with orange edge glow, lines on both sides of the eyebrow,
   tall photo cards: photo on the right, icon top-left, text bottom-left.
========================================================= */
#industries.smm-sec--plain {
  background:
    radial-gradient(ellipse 22% 60% at 0% 75%, rgba(255, 107, 0, .30), transparent 70%),
    radial-gradient(ellipse 22% 60% at 100% 30%, rgba(255, 107, 0, .30), transparent 70%),
    radial-gradient(ellipse 40% 30% at 50% 0%, rgba(255, 107, 0, .08), transparent 70%),
    #050505;
}
#industries.smm-sec--plain::before { opacity: .5; }
#industries .smm-dots--tr, #industries .smm-dots--bl { display: none; }
/* thin orange glow along the left and right edge */
#industries.smm-sec--plain { box-shadow: inset 6px 0 30px -18px rgba(255, 107, 0, .9), inset -6px 0 30px -18px rgba(255, 107, 0, .9); }

#industries .smm-eyebrow::after { content: ''; width: 40px; height: 2px; background: var(--o); flex: none; }

#industries .smm-grid { gap: clamp(14px, 1.4vw, 24px); margin-top: calc(var(--k) * 1.8); }
#industries .smm-card--p {
  flex-direction: column; align-items: flex-start; justify-content: space-between;
  gap: 14px;
  min-height: clamp(170px, 13.5vw, 230px);
  padding: 20px 22px;
  border-radius: 16px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--c) 22%, #07080f) 0, #07080f 55%);
}
#industries .smm-card--p::before {           /* the photo fills most of the card */
  width: 68%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.55) 30%, #000 60%);
          mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.55) 30%, #000 60%);
  opacity: .95;
}
#industries .smm-card--p::after {            /* dark shade bottom-left so the text is always readable */
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(5, 5, 10, .85) 0, rgba(5, 5, 10, 0) 60%),
              linear-gradient(90deg, rgba(5, 5, 10, .55) 0, rgba(5, 5, 10, 0) 55%);
}
#industries .smm-card--p .smm-card__t { max-width: 78%; }
#industries .smm-ic {
  width: 54px; height: 54px;
  background: rgba(5, 5, 10, .6);
  border: 2px solid var(--c);
}
#industries .smm-card--p:hover { transform: translateY(-7px); }
#industries .smm-card--p:hover .smm-ic { transform: scale(1.12) rotate(-8deg); }

@media (min-width: 1300px) {
  #industries .smm-card--p .smm-card__t { max-width: 80%; }
}
@media (max-width: 640px) {
  #industries .smm-card--p { min-height: 170px; }
  #industries .smm-card--p::before { width: 75%; }
}

/* =========================================================
   HOW WE WORK ("No Random Posts. A System for Social Growth.")
   Steps sit right under the heading (no empty gap), each step has a
   glowing icon, a glowing line joins the steps, centred flow bar.
========================================================= */
#process.smm-sec--plain {
  background:
    radial-gradient(ellipse 40% 55% at 0% 0%, rgba(47, 123, 255, .24), transparent 70%),
    radial-gradient(ellipse 32% 45% at 100% 0%, rgba(255, 107, 0, .14), transparent 70%),
    radial-gradient(ellipse 32% 45% at 100% 100%, rgba(255, 107, 0, .18), transparent 70%),
    #060914;
}
#process .smm-sec__extra { margin-top: calc(var(--k) * 4.2); }
#process .smm-row { position: relative; gap: clamp(14px, 1.4vw, 24px); }

/* glowing line across the top of the steps */
@media (min-width: 1101px) {
  #process .smm-row::before {
    content: ''; position: absolute; z-index: 0;
    top: 0; left: 8%; right: 8%; height: 2px;
    background: linear-gradient(90deg, #ff6b00, #2f8bff, #8b5cf6, #12c7ff, #ff6b00);
    background-size: 200% 100%;
    box-shadow: 0 0 12px rgba(255, 107, 0, .5);
    opacity: .75;
    animation: smm-lineflow 6s linear infinite;
  }
}
@keyframes smm-lineflow { from { background-position: 0 0; } to { background-position: 200% 0; } }

#process .smm-step {
  z-index: 1;
  padding: 44px 18px 20px;
  border-radius: 16px;
}
#process .smm-step__ic {
  position: absolute; top: -26px; left: 18px;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 1.2rem; color: #fff;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .35), var(--c) 50%);
  border: 3px solid #060914;
  box-shadow: 0 0 20px color-mix(in srgb, var(--c) 85%, transparent);
  animation: smm-icpulse 3s ease-in-out infinite;
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1);
}
#process .smm-step:nth-child(2) .smm-step__ic { animation-delay: .6s; }
#process .smm-step:nth-child(3) .smm-step__ic { animation-delay: 1.2s; }
#process .smm-step:nth-child(4) .smm-step__ic { animation-delay: 1.8s; }
#process .smm-step:nth-child(5) .smm-step__ic { animation-delay: 2.4s; }
@keyframes smm-icpulse {
  0%, 70%, 100% { box-shadow: 0 0 18px color-mix(in srgb, var(--c) 80%, transparent); }
  35%           { box-shadow: 0 0 0 7px color-mix(in srgb, var(--c) 18%, transparent), 0 0 30px var(--c); }
}
#process .smm-step:hover .smm-step__ic { transform: scale(1.14) rotate(-10deg); }
#process .smm-step__n { position: absolute; top: 14px; right: 16px; margin: 0; font-size: clamp(1.6rem, calc(var(--k) * 2.6), 2.3rem); opacity: .9; }
#process .smm-step:hover .smm-step__n { transform: scale(1.1); transform-origin: right center; }
#process .smm-step h3 { margin-top: 6px; }

@media (max-width: 1100px) {
  #process .smm-sec__extra { margin-top: 44px; }
  #process .smm-row { row-gap: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  #process .smm-row::before, #process .smm-step__ic { animation: none; }
}

/* =========================================================
   INDUSTRY CARDS: plain (no photo, no big icon), soft colour glow on the right
========================================================= */
#industries .smm-card--p::before { content: none; }
#industries .smm-card--p::after {
  background: radial-gradient(ellipse 60% 80% at 90% 40%, color-mix(in srgb, var(--c) 16%, transparent), transparent 70%);
}

/* =========================================================
   HERO: social icons strip moved a little lower
========================================================= */
.smm-sec--hero .smm-strip { margin-top: calc(var(--k) * 3.4); }
@media (max-width: 1100px) { .smm-sec--hero .smm-strip { margin-top: 32px; } }