/* ==========================================================================
   FGX — Influencer marketing (influencer-marketing/index.html)
   Builds on /assets/fgx/fgx-type.css (fonts + fluid type scale) and
   ui-ux.css (tokens, grid, buttons, reasons, process, theme switching).
     FGX-IM-01 hero + creator feed wall   FGX-IM-04 vanity vs value
     FGX-IM-02 influencer archetypes      FGX-IM-07 goal chips
   ========================================================================== */

.inf .ux-eyebrow a { color: inherit; text-decoration: none; }
.inf .ux-eyebrow a:hover { color: var(--ux-red); }
.inf-intro { margin-top: 28px !important; }

/* ---------- 01 Hero ------------------------------------------------------- */
.inf-hero { position: relative; padding-top: clamp(120px, 17vh, 200px); padding-bottom: clamp(88px, 11vw, 180px); overflow: hidden; }
.inf-hero::before { content: ""; position: absolute; right: -20vw; top: 25vh; width: 75vw; height: 75vw; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(229, 36, 33, .16), transparent 70%); }
.inf-hero__body { position: relative; display: grid; gap: 56px; margin-top: clamp(40px, 5vw, 88px); }
@media (min-width: 1200px) { .inf-hero__body { grid-template-columns: 5fr 7fr; gap: var(--ux-gap); align-items: start; } .inf-hero__copy { padding-top: 12px; } }
.inf-hero__copy .ux-lead { max-width: 25ch; }
.inf-platforms { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: clamp(36px, 4vw, 64px) 0 0; padding: 0; }
.inf-platforms li { padding: 9px 16px; border: 1px solid var(--ux-line); border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--ux-muted); }

/* Feed wall */
.inf-feed {
  position: relative; display: flex; justify-content: center; align-items: center; gap: clamp(12px, 1.6vw, 24px);
  height: clamp(560px, 46vw, 760px); overflow: hidden; perspective: 1600px; isolation: isolate;
  border: 0; border-radius: 0;
  background: transparent;
}
.inf-feed::before { content: none; }
.inf-feed__cap { position: absolute; left: 0; top: 20px; z-index: 3; display: flex; align-items: center; gap: 10px; margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(244, 240, 238, .55); }
.inf-feed__rec { width: 8px; height: 8px; border-radius: 50%; background: var(--ux-red); animation: ux-pulse 2.4s infinite; }

.inf-phone {
  position: relative; flex: 0 0 auto; width: clamp(170px, 15vw, 240px); aspect-ratio: 9 / 19; padding: 8px;
  border-radius: 34px; background: #050505; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 40px 80px rgba(0, 0, 0, .6);
  will-change: transform;
}
.inf-phone::before { content: ""; position: absolute; left: 50%; top: 16px; z-index: 2; width: 34%; height: 18px; margin-left: -17%; border-radius: 999px; background: #050505; }
.inf-phone--a { transform: translateY(8%) rotate(-6deg) scale(.9); opacity: .9; }
.inf-phone--b { z-index: 1; width: clamp(200px, 17.5vw, 280px); }
.inf-phone--c { transform: translateY(-6%) rotate(6deg) scale(.9); opacity: .9; }
.inf-phone__screen { position: relative; height: 100%; overflow: hidden; border-radius: 27px; background: #f7f4f2; }
.inf-phone__col { display: grid; gap: 10px; padding: 34px 8px 8px; will-change: transform; }
.inf-post { padding: 8px; border-radius: 14px; background: #fff; box-shadow: 0 1px 0 rgba(15, 15, 15, .06); color: #0f0f0f; }
.inf-post header { display: flex; align-items: center; gap: 6px; font-size: 9px; }
.inf-post header i { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(from 30deg, var(--c), #f2a900, var(--c)); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--c); }
.inf-post header b { font-weight: 700; }
.inf-post header span { margin-left: auto; padding: 2px 5px; border-radius: 4px; background: rgba(229, 36, 33, .1); color: var(--ux-red); font-size: 7px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.inf-post__img { margin: 7px 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 9px; background: #ddd; }
.inf-post__img img { width: 100%; height: 100%; object-fit: cover; }
.inf-post footer { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1; }
.inf-post footer span:first-child { color: var(--ux-red); }
.inf-post footer em { margin-left: auto; width: 26%; height: 6px; border-radius: 99px; background: rgba(15, 15, 15, .1); }
.inf-post p { display: grid; gap: 4px; margin: 7px 0 2px; }
.inf-post p i { height: 5px; border-radius: 99px; background: rgba(15, 15, 15, .1); }
.inf-post p i + i { width: 62%; }

.inf-tag { position: absolute; z-index: 3; display: flex; align-items: center; gap: 9px; padding: 11px 15px; border-radius: 14px; background: rgba(20, 20, 20, .74); border: 1px solid rgba(255, 255, 255, .12); color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 20px 40px rgba(0, 0, 0, .35); }
.inf-tag i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ux-red); font-style: normal; font-size: 11px; }
.inf-tag--1 { left: 5%; top: 22%; }
.inf-tag--2 { right: 5%; top: 46%; }
.inf-tag--3 { left: 8%; bottom: 10%; }
@media (max-width: 767px) {
  .inf-feed { height: 560px; }
  .inf-phone--a, .inf-phone--c { display: none; }
  .inf-phone--b { width: 230px; }
  .inf-tag--1 { left: 4%; top: 14%; }
  .inf-tag--2 { right: 4%; }
  .inf-tag--3 { left: 4%; bottom: 6%; }
}

/* ---------- 02 Archetypes ------------------------------------------------- */
.inf-who { margin-top: clamp(72px, 9vw, 160px); }
.inf-who__lead { max-width: 34ch; margin-bottom: clamp(40px, 5vw, 72px) !important; }
.inf-archetypes { list-style: none; margin: 0; padding: 0; display: grid; gap: 48px var(--ux-gap); }
@media (min-width: 768px) { .inf-archetypes { grid-template-columns: repeat(3, 1fr); } .inf-arch:nth-child(2) { margin-top: 8vh; } .inf-arch:nth-child(3) { margin-top: 16vh; } }
.inf-arch__img { aspect-ratio: 4 / 5; margin-bottom: 22px; }
.inf-arch__img > img { transition: transform 1.1s var(--ux-ease); }
.inf-arch:hover .inf-arch__img > img { transform: scale(1.05); }
.inf-arch__plat { display: inline-block; margin-bottom: 14px; padding: 6px 12px; border: 1px solid var(--ux-line); border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--ux-red); }
.inf-arch .ux-body { max-width: 32ch; }

/* ---------- 04 Vanity vs value ------------------------------------------- */
.inf-metrics__grid { display: grid; gap: 56px var(--ux-gap); }
@media (min-width: 992px) { .inf-metrics__grid { grid-template-columns: 1fr 1fr; } }
.inf-col__t { margin-bottom: 18px !important; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.inf-col ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(15, 15, 15, .25); }
.inf-col li { display: flex; align-items: center; gap: 16px; padding: clamp(16px, 1.8vw, 26px) 0; border-bottom: 1px solid rgba(15, 15, 15, .25); font-family: var(--ux-display); font-weight: 600; font-size: clamp(26px, 2.8vw, 54px); line-height: 1.02; letter-spacing: -.045em; }
.inf-col--vanity li { color: rgba(15, 15, 15, .55); }
.inf-col--vanity s { position: relative; text-decoration: none; }
.inf-col--vanity s::after { content: ""; position: absolute; left: -2%; right: -2%; top: 54%; height: .08em; background: var(--ux-ink); transform: scaleX(var(--s, 1)); transform-origin: 0 50%; }
.inf-col--value li { color: var(--ux-ink); }
.inf-col--value li i { flex: 0 0 auto; display: grid; place-items: center; width: .9em; height: .9em; border-radius: 50%; background: var(--ux-ink); color: var(--ux-red); font-style: normal; font-size: .5em; }

/* ---------- 05 Process tweaks -------------------------------------------- */
.inf-process .ux-step .ux-h4 { margin-top: 4px; }

/* ---------- 07 Goal chips ------------------------------------------------- */
.inf-goals { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.inf-goals button {
  all: unset; box-sizing: border-box; cursor: pointer; padding: 13px 20px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px;
  font-size: 15px; font-weight: 700; color: #fff; transition: background .35s var(--ux-ease), border-color .35s var(--ux-ease), transform .35s var(--ux-ease);
}
.inf-goals button:hover { border-color: #fff; }
.inf-goals button[aria-pressed="true"] { background: var(--ux-red); border-color: var(--ux-red); }
.inf-goals button[aria-pressed="true"]::before { content: "✓ "; }
.inf-goals button:active { transform: scale(.96); }
.inf-goals button:focus-visible { outline: 3px solid #f2d200; outline-offset: 3px; }

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