/* =============================================================
   Intellimark FX — small touches that go a long way
   ============================================================= */

/* --- 05 Asphalt grain texture on hero --------------------------- */
.fx-grain {
  position: relative;
}
.fx-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNjAnIGhlaWdodD0nMTYwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPScwIDAgMCAwIDEgIDAgMCAwIDAgMSAgMCAwIDAgMCAxICAwIDAgMCAwLjI4IDAnLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJyBmaWx0ZXI9J3VybCglMjNuKScvPjwvc3ZnPg==");
  background-size: 160px 160px;
  z-index: 0;
}
.fx-grain > * { position: relative; z-index: 1; }

/* Darker asphalt variant for sections */
.fx-grain--dark::after { opacity: 0.45; mix-blend-mode: screen; }

/* --- 16 Blueprint grid section transition ----------------------- */
.fx-blueprint {
  position: relative;
}
.fx-blueprint::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(240,200,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240,200,0,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(180deg, transparent 0%, black 20%, black 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 20%, black 80%, transparent 100%);
  z-index: 0;
}
.fx-blueprint > * { position: relative; z-index: 1; }

/* --- 02 Scroll-linked paver stripe ------------------------------ */
.fx-paver-stripe {
  position: relative;
  height: 14px;
  overflow: hidden;
  background: transparent;
}
.fx-paver-stripe::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    90deg,
    var(--im-primary) 0 32px,
    transparent 32px 64px
  );
  transform-origin: left center;
  transform: scaleX(var(--fx-stripe, 0));
  transition: none;
  opacity: 0.85;
}
.fx-paver-stripe--thin { height: 6px; }
.fx-paver-stripe--thin::before { opacity: 0.55; }

/* --- 07 Measurement-tape ruled accent --------------------------- */
.fx-tape {
  position: relative;
  padding-left: 24px;
}
.fx-tape::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--im-primary);
  opacity: 0.8;
}
.fx-tape::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 10px;
  background-image: repeating-linear-gradient(
    0deg,
    var(--im-primary) 0 1px,
    transparent 1px 12px
  );
  opacity: 0.6;
}
/* Horizontal tape used as a full-width rule */
.fx-tape-h {
  position: relative;
  height: 18px;
}
.fx-tape-h::before {
  content: "";
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 1px;
  background: var(--im-primary);
  opacity: 0.6;
}
.fx-tape-h::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0 11px,
    var(--im-primary) 11px 12px,
    transparent 12px 24px,
    var(--im-primary) 24px 25px,
    transparent 25px 48px,
    rgba(240,200,0,0.5) 48px 49px,
    transparent 49px 60px,
    var(--im-primary) 60px 61px,
    transparent 61px 96px,
    var(--im-primary) 96px 98px,
    transparent 98px 120px
  );
  opacity: 0.8;
  mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%);
}
.fx-tape-h__label {
  position: absolute;
  top: -18px;
  right: 0;
  font-family: var(--im-font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--im-fg-dim);
  text-transform: uppercase;
}

/* --- 08 Hazard-stripe diagonal bands ---------------------------- */
.fx-hazard {
  position: relative;
  padding: clamp(28px, 4vw, 48px);
  background: var(--im-card);
  border: 1px solid var(--im-border);
  border-radius: 16px;
  overflow: hidden;
}
.fx-hazard::before,
.fx-hazard::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 10px;
  background-image: repeating-linear-gradient(
    135deg,
    var(--im-primary) 0 14px,
    #121212 14px 28px
  );
}
.fx-hazard::before { top: 0; }
.fx-hazard::after  { bottom: 0; }

/* --- 09 Oversized ghost section numbers ------------------------- */
.fx-ghost-num {
  position: relative;
  overflow: hidden;
}
.fx-ghost-num__digit {
  position: absolute;
  right: -2vw;
  top: -2vw;
  font-family: var(--im-font-mono);
  font-size: clamp(220px, 32vw, 480px);
  line-height: 0.8;
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1px rgba(240,200,0,0.12);
  text-stroke: 1px rgba(240,200,0,0.12);
  letter-spacing: -0.05em;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.fx-ghost-num__digit--left {
  left: -2vw;
  right: auto;
}
.fx-ghost-num__digit--bottom {
  top: auto;
  bottom: -6vw;
}
.fx-ghost-num > * { position: relative; z-index: 1; }

/* --- 10 Spec-sheet label, stronger ------------------------------ */
.fx-spec {
  font-family: var(--im-font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--im-fg-dim);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.fx-spec::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--im-primary);
  transform: rotate(45deg);
  flex-shrink: 0;
}
.fx-spec--muted { color: var(--im-fg-muted); }

/* --- 11 Animated underline on nav / inline links ---------------- */
.nav__links > a,
.nav__dropdown > button { position: relative; }
.nav__links > a::after,
.nav__dropdown > button::after {
  /* keep existing caret after-rule, so just for a-tags */
}
.nav__links > a::before {
  content: "";
  position: absolute;
  left: 0; bottom: 4px;
  height: 2px;
  width: 100%;
  background: var(--im-primary);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nav__links > a:hover::before,
.nav__links > a[aria-current="page"]::before {
  transform: scaleX(1);
  transform-origin: left center;
}

.fx-link {
  position: relative;
  display: inline-block;
  color: var(--im-fg);
  font-weight: 500;
}
.fx-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1.5px;
  background: var(--im-primary);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.28s cubic-bezier(0.2,0.8,0.2,1);
}
.fx-link:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* --- 01 Magnetic tilt on tiles ---------------------------------- */
.fx-tilt {
  transition: transform 0.18s cubic-bezier(0.2,0.8,0.2,1);
  will-change: transform;
  transform-style: preserve-3d;
}
.fx-tilt-child {
  transition: transform 0.18s cubic-bezier(0.2,0.8,0.2,1);
}

/* --- 04 Marquee ticker ------------------------------------------ */
.fx-marquee {
  display: flex;
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
  padding: 28px 0;
  border-top: 1px solid var(--im-border);
  border-bottom: 1px solid var(--im-border);
  background: var(--im-bg-2);
}
.fx-marquee__track {
  display: flex;
  gap: 48px;
  flex-shrink: 0;
  animation: fx-marquee-scroll 50s linear infinite;
  padding-right: 48px;
}
.fx-marquee:hover .fx-marquee__track { animation-play-state: paused; }
.fx-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--im-font-mono);
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--im-fg);
  white-space: nowrap;
  flex-shrink: 0;
}
.fx-marquee__item--closed {
  color: var(--im-fg-dim);
  text-decoration: line-through;
  text-decoration-color: var(--im-primary);
  text-decoration-thickness: 2px;
}
.fx-marquee__item::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--im-primary);
  border-radius: 50%;
  flex-shrink: 0;
}
.fx-marquee__item--closed::before {
  background: var(--im-fg-dim);
}
@keyframes fx-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --- 12 SiteIQ satellite tile (animated polygon draw) ----------- */
.fx-sat {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(255,255,255,0.04), transparent 60%),
    repeating-linear-gradient(
      0deg, #1a1d1c 0 4px, #1f2220 4px 5px
    ),
    #161816;
  border: 1px solid var(--im-border-2);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 0 80px rgba(0,0,0,0.6);
}
.fx-sat__chip {
  position: absolute;
  top: 14px; left: 14px;
  font-family: var(--im-font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--im-primary);
  padding: 5px 10px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(240,200,0,0.35);
  border-radius: 4px;
  z-index: 4;
}
.fx-sat__stage {
  position: absolute;
  top: 14px; right: 14px;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  white-space: nowrap;
  gap: 0;
  font-family: var(--im-font-mono);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 7px 12px;
  background: rgba(0,0,0,0.78);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 4px;
  z-index: 4;
  color: #fff;
  backdrop-filter: blur(4px);
}
.fx-sat__stage > span { display: inline-block; }
.fx-sat__stage-num { color: var(--im-primary); font-weight: 700; }
.fx-sat__stage-sep { color: #555; margin: 0 3px; }
.fx-sat__stage-tot { color: #888; }
.fx-sat__stage-lbl { color: #fff; margin-left: 10px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,0.18); font-weight: 600; }
.fx-sat__coord {
  position: absolute;
  bottom: 14px; right: 14px;
  font-family: var(--im-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--im-fg-dim);
  z-index: 4;
}
.fx-sat__svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 2;
}
.fx-sat__svg text { paint-order: stroke fill; }
.fx-sat__scan {
  position: absolute;
  left: 0; right: 0;
  height: 80px;
  background: linear-gradient(180deg, transparent, rgba(240,200,0,0.08), transparent);
  pointer-events: none;
  z-index: 3;
  animation: fx-sat-scan 6s ease-in-out infinite;
}
@keyframes fx-sat-scan {
  0%, 100% { transform: translateY(-80px); }
  50%      { transform: translateY(calc(100% + 80px)); }
}

/* --- 12b Meta Ads tile (neighborhood / ad / broadcast / leads) -- */
.fx-meta {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #0c120e;
  border: 1px solid var(--im-border-2);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 0 80px rgba(0,0,0,0.5);
}
.fx-meta__chip {
  position: absolute;
  top: 14px; left: 14px;
  font-family: var(--im-font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--im-primary);
  padding: 5px 10px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(240,200,0,0.35);
  border-radius: 4px;
  z-index: 4;
}
.fx-meta__stage {
  position: absolute;
  top: 14px; right: 14px;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  white-space: nowrap;
  gap: 0;
  font-family: var(--im-font-mono);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 7px 12px;
  background: rgba(0,0,0,0.78);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 4px;
  z-index: 4;
  color: #fff;
  backdrop-filter: blur(4px);
}
.fx-meta__svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 2;
}
.fx-meta__svg text { paint-order: stroke fill; }

/* --- 12c Cold Email tile ---------------------------------------- */
.fx-cold {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #0a0a0a;
  border: 1px solid var(--im-border-2);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 0 80px rgba(0,0,0,0.5);
}
.fx-cold__chip {
  position: absolute;
  top: 14px; left: 14px;
  font-family: var(--im-font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--im-primary);
  padding: 5px 10px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(240,200,0,0.35);
  border-radius: 4px;
  z-index: 4;
}
.fx-cold__stage {
  position: absolute;
  top: 14px; right: 14px;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  white-space: nowrap;
  gap: 0;
  font-family: var(--im-font-mono);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 7px 12px;
  background: rgba(0,0,0,0.78);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 4px;
  z-index: 4;
  color: #fff;
  backdrop-filter: blur(4px);
}
.fx-cold__svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 2;
}
.fx-cold__svg text { paint-order: stroke fill; }

/* --- 12d SEO tile ----------------------------------------------- */
.fx-seo {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #0a0a0a;
  border: 1px solid var(--im-border-2);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 0 80px rgba(0,0,0,0.5);
}
.fx-seo__chip {
  position: absolute;
  top: 14px; left: 14px;
  font-family: var(--im-font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--im-primary);
  padding: 5px 10px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(240,200,0,0.35);
  border-radius: 4px;
  z-index: 4;
}
.fx-seo__stage {
  position: absolute;
  top: 14px; right: 14px;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  white-space: nowrap;
  gap: 0;
  font-family: var(--im-font-mono);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 7px 12px;
  background: rgba(0,0,0,0.78);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 4px;
  z-index: 4;
  color: #fff;
  backdrop-filter: blur(4px);
}
.fx-seo__svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 2;
}
.fx-seo__svg text { paint-order: stroke fill; }

/* --- 12e Google Ads tile --------------------------------------- */
.fx-gads {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #0a0a0a;
  border: 1px solid var(--im-border-2);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 0 80px rgba(0,0,0,0.5);
}
.fx-gads__chip {
  position: absolute;
  top: 14px; left: 14px;
  font-family: var(--im-font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--im-primary);
  padding: 5px 10px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(240,200,0,0.35);
  border-radius: 4px;
  z-index: 4;
}
.fx-gads__stage {
  position: absolute;
  top: 14px; right: 14px;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  white-space: nowrap;
  gap: 0;
  font-family: var(--im-font-mono);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 7px 12px;
  background: rgba(0,0,0,0.78);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 4px;
  z-index: 4;
  color: #fff;
  backdrop-filter: blur(4px);
}
.fx-gads__svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 2;
}
.fx-gads__svg text { paint-order: stroke fill; }

/* --- Shared story layout: centered heading over full-width viz --- */
.fx-story-head {
  max-width: 780px;
  margin: 0 auto 36px;
  text-align: center;
}
.fx-story-title {
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin-bottom: 18px;
  text-wrap: balance;
}
.fx-story-sub {
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.55;
  max-width: 680px;
  margin: 0 auto;
}
.fx-story-viz {
  aspect-ratio: 16 / 10;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

/* override tile defaults when used as a story viz */
.fx-meta.fx-story-viz,
.fx-cold.fx-story-viz,
.fx-seo.fx-story-viz,
.fx-gads.fx-story-viz {
  aspect-ratio: 16 / 10;
}

@media (max-width: 720px) {
  .fx-story-head { margin-bottom: 24px; }
  .fx-meta.fx-story-viz,
  .fx-cold.fx-story-viz,
  .fx-seo.fx-story-viz,
  .fx-gads.fx-story-viz {
    aspect-ratio: 4 / 5;
  }
}

/* --- 13 Before/after slider ------------------------------------- */
.fx-ba {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--im-border);
  user-select: none;
  cursor: ew-resize;
  background: #0a0a0a;
}
.fx-ba__layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.fx-ba__layer--after {
  clip-path: inset(0 0 0 var(--fx-ba, 50%));
}
.fx-ba__handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--fx-ba, 50%);
  width: 2px;
  background: var(--im-primary);
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: none;
}
.fx-ba__handle::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  background: var(--im-primary);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.4), 0 10px 30px rgba(240,200,0,0.4);
}
.fx-ba__handle::after {
  content: "⇆";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--im-font-mono);
  font-size: 18px;
  color: #121212;
  font-weight: 900;
}
.fx-ba__label {
  position: absolute;
  top: 16px;
  font-family: var(--im-font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 6px 12px;
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  color: var(--im-fg);
  z-index: 4;
}
.fx-ba__label--before { left: 16px; }
.fx-ba__label--after  { right: 16px; color: var(--im-primary); border-color: rgba(240,200,0,0.35); }

/* "Drawn" faux-photos for the slider when you don't have real photography */
.fx-ba__layer--before-stub {
  background:
    radial-gradient(ellipse at 40% 30%, rgba(255,255,255,0.03), transparent 60%),
    repeating-linear-gradient(92deg, rgba(255,255,255,0.015) 0 4px, transparent 4px 9px),
    linear-gradient(180deg, #292929 0%, #1b1b1b 100%);
  position: relative;
}
.fx-ba__layer--before-stub::before {
  /* Faux cracks */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(92deg, transparent 24%, rgba(255,255,255,0.08) 24.5%, transparent 25.2%),
    linear-gradient(-88deg, transparent 52%, rgba(255,255,255,0.06) 52.5%, transparent 53%),
    linear-gradient(170deg, transparent 71%, rgba(255,255,255,0.05) 71.8%, transparent 72.5%);
  mix-blend-mode: screen;
  opacity: 0.7;
}
.fx-ba__layer--after-stub {
  background:
    radial-gradient(ellipse at 50% 45%, rgba(40,40,40,0.4), transparent 80%),
    linear-gradient(180deg, #0e0e0e 0%, #060606 100%);
  position: relative;
}
.fx-ba__layer--after-stub::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 64px);
  opacity: 0.9;
}
/* Striped parking stalls on "after" */
.fx-ba__layer--after-stub::after {
  content: "";
  position: absolute;
  inset: auto 12% 14% 12%;
  top: 58%;
  height: 38%;
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0 46px,
    rgba(240,200,0,0.9) 46px 49px
  );
  mask-image: linear-gradient(180deg, black 0, black 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, black 0, black 80%, transparent 100%);
}

/* --- 14 Active-markets US map ---------------------------------- */
.fx-map {
  position: relative;
  width: 100%;
  border: 1px solid var(--im-border);
  border-radius: 18px;
  background: var(--im-card);
  padding: clamp(24px, 4vw, 48px);
  overflow: hidden;
}
.fx-map__legend {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 24px;
  font-family: var(--im-font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--im-fg-muted);
}
.fx-map__legend span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.fx-map__swatch {
  width: 14px; height: 14px;
  border-radius: 3px;
}
.fx-map__svg path {
  fill: #14241a;
  stroke: #2a4a32;
  stroke-width: 0.6;
  cursor: default;
  transition: fill 0.2s, stroke 0.2s;
}
.fx-map__svg path[data-status="active"] {
  fill: #c25a14;
  stroke: #ff8a3c;
  stroke-width: 0.8;
}
.fx-map__svg path[data-status="open"] {
  fill: #1f3a26;
  stroke: #2f5a3a;
  stroke-width: 0.6;
}
.fx-map__svg path[data-status="active"]:hover {
  fill: #d96a1c;
  stroke: #ffaa55;
  cursor: pointer;
}
.fx-map__svg path[data-status="open"]:hover {
  fill: #2a5a36;
  stroke: #4a8a55;
  cursor: pointer;
}
.fx-map__tooltip {
  position: absolute;
  pointer-events: none;
  padding: 6px 10px;
  background: #000;
  color: var(--im-primary);
  font-family: var(--im-font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border: 1px solid var(--im-primary);
  border-radius: 4px;
  white-space: nowrap;
  transform: translate(-50%, -120%);
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 10;
}
.fx-map__tooltip[data-show="true"] { opacity: 1; }

/* --- 15 Crosshair cursor ---------------------------------------- */
.fx-crosshair {
  cursor: crosshair;
}
.fx-cursor-target {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><circle cx='16' cy='16' r='10' fill='none' stroke='%23f0c800' stroke-width='1.5'/><line x1='16' y1='0' x2='16' y2='12' stroke='%23f0c800' stroke-width='1.5'/><line x1='16' y1='20' x2='16' y2='32' stroke='%23f0c800' stroke-width='1.5'/><line x1='0' y1='16' x2='12' y2='16' stroke='%23f0c800' stroke-width='1.5'/><line x1='20' y1='16' x2='32' y2='16' stroke='%23f0c800' stroke-width='1.5'/><circle cx='16' cy='16' r='1.5' fill='%23f0c800'/></svg>") 16 16, crosshair;
}

/* --- 17 Day/Night toggle ---------------------------------------- */
.fx-dn {
  position: fixed;
  bottom: 20px; right: 20px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  background: rgba(14,14,14,0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--im-border-2);
  border-radius: 999px;
  font-family: var(--im-font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--im-fg-dim);
  cursor: pointer;
  transition: all 0.15s;
}
.fx-dn:hover { border-color: var(--im-primary); color: var(--im-fg); }
.fx-dn__ico {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--im-primary);
  position: relative;
  transition: all 0.3s;
  box-shadow: 0 0 0 2px rgba(240,200,0,0.2);
}
.fx-dn__ico::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #121212 30%, transparent 31%);
  opacity: 0;
  transition: opacity 0.3s;
}
body[data-mode="day"] .fx-dn__ico { background: #f8d040; box-shadow: 0 0 0 2px rgba(248,208,64,0.3), 0 0 20px rgba(248,208,64,0.5); }
body[data-mode="day"] .fx-dn { background: rgba(255,255,255,0.08); }
body[data-mode="night"] .fx-dn__ico::before { opacity: 1; }
body[data-mode="night"] .fx-dn__ico { box-shadow: inset -4px -4px 8px rgba(0,0,0,0.3), 0 0 20px rgba(240,200,0,0.3); background: #e5e5e5; }
.fx-dn__label::before {
  content: attr(data-mode);
}

/* Day mode tint — subtle wash, doesn't nuke the brand */
body[data-mode="day"] {
  background: #faf8f3;
  color: #1a1a1a;
}
body[data-mode="day"] .nav { background: rgba(250,248,243,0.85); border-bottom-color: rgba(0,0,0,0.1); }
body[data-mode="day"] .nav__brand img { filter: invert(1); }
body[data-mode="day"] .footer__brand img { filter: invert(1); }
body[data-mode="day"] .nav__links > a,
body[data-mode="day"] .nav__dropdown > button { color: #444; }
body[data-mode="day"] .nav__links > a:hover,
body[data-mode="day"] .nav__dropdown > button:hover { color: #000; }
body[data-mode="day"] .muted { color: #555; }
body[data-mode="day"] .dim { color: #888; }
body[data-mode="day"] {
  --im-bg: #faf8f3;
  --im-bg-2: #f2efe7;
  --im-card: #fff;
  --im-card-2: #fafafa;
  --im-border: #e3ddd0;
  --im-border-2: #d0c9ba;
  --im-fg: #1a1a1a;
  --im-fg-muted: #555;
  --im-fg-dim: #8a8a7e;
  --im-asphalt: #e8e2d4;
}
body[data-mode="day"] .fx-grain::after { mix-blend-mode: multiply; opacity: 0.2; }
body[data-mode="day"] .tile { background: #fff; }
body[data-mode="day"] .asphalt-bg { background: #ece5d4; }
body[data-mode="day"] .nav__menu { background: #fff; border-color: #ddd; box-shadow: 0 20px 40px rgba(0,0,0,0.08); }

/* --- 18 Compiled timestamp footer ------------------------------- */
.fx-stamp {
  font-family: var(--im-font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--im-fg-dim);
  padding: 14px 0;
  border-top: 1px dashed var(--im-border);
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  justify-content: space-between;
  align-items: center;
}
.fx-stamp strong {
  color: var(--im-primary);
  font-weight: 600;
}

/* --- 03 Number ticker ------------------------------------------- */
.fx-num {
  font-variant-numeric: tabular-nums;
  display: inline-block;
}

/* --- Reveal on scroll (gentle) ---------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  [data-fx-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  [data-fx-reveal].is-revealed {
    opacity: 1;
    transform: none;
  }
}

/* Mobile hide for heavy effects */
@media (max-width: 640px) {
  .fx-ghost-num__digit { font-size: 180px; }
  .fx-dn { bottom: 14px; right: 14px; transform: scale(0.9); }
  /* SiteIQ satellite tile — make taller on mobile so SVG text stays legible */
  .fx-sat { aspect-ratio: 4 / 5; }
  .fx-sat__chip { font-size: 9px; letter-spacing: 0.12em; padding: 4px 7px; max-width: 62%; line-height: 1.3; }
  .fx-sat__stage { font-size: 9px; letter-spacing: 0.12em; padding: 5px 8px; }
  .fx-meta { aspect-ratio: 4 / 5; }
  .fx-meta__chip { font-size: 9px; letter-spacing: 0.12em; padding: 4px 7px; max-width: 62%; line-height: 1.3; }
  .fx-meta__stage { font-size: 9px; letter-spacing: 0.12em; padding: 5px 8px; }
  .fx-cold { aspect-ratio: 4 / 5; }
  .fx-cold__chip { font-size: 9px; letter-spacing: 0.12em; padding: 4px 7px; max-width: 62%; line-height: 1.3; }
  .fx-cold__stage { font-size: 9px; letter-spacing: 0.12em; padding: 5px 8px; }
  .fx-seo { aspect-ratio: 4 / 5; }
  .fx-seo__chip { font-size: 9px; letter-spacing: 0.12em; padding: 4px 7px; max-width: 62%; line-height: 1.3; }
  .fx-seo__stage { font-size: 9px; letter-spacing: 0.12em; padding: 5px 8px; }
  .fx-gads { aspect-ratio: 4 / 5; }
  .fx-gads__chip { font-size: 9px; letter-spacing: 0.12em; padding: 4px 7px; max-width: 62%; line-height: 1.3; }
  .fx-gads__stage { font-size: 9px; letter-spacing: 0.12em; padding: 5px 8px; }
  .fx-sat__stage-lbl { margin-left: 6px; padding-left: 6px; }
  .fx-sat__coord { font-size: 9px; }
  .fx-marquee__item { font-size: 13px; }
}

/* =============================================================
   Unified Dashboard — phone-mockup animation block
   Markup: <section class="section"><div class="wrap">
             <div class="dash" data-channel="cold"> ... </div>
           </div></section>
   ============================================================= */
.dash {
  display: grid;
  grid-template-columns: 1fr minmax(360px, 400px);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
  max-width: 1160px;
  margin: 0 auto;
}
.dash__copy { max-width: 540px; }
.dash__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dash__li {
  position: relative;
  padding: 22px;
  border: 1px solid var(--im-border);
  border-radius: 14px;
  background: var(--im-card);
}
.dash__li-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
  color: var(--im-fg);
  display: flex;
  align-items: center;
  gap: 12px;
}
.dash__li-title::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--im-primary);
  transform: rotate(45deg);
  flex-shrink: 0;
}
.dash__li-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--im-fg-muted);
  padding-left: 18px;
}
.dash__seal {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px dashed var(--im-border);
}

/* Phone bezel — sized so the inner screen matches the SVG 1:2 viewBox aspect */
.dash__phone-wrap {
  display: grid;
  place-items: center;
  perspective: 1400px;
  position: relative;
}
.dash__phone {
  position: relative;
  width: 360px;
  height: 692px;     /* (360-28)*2 + 28 — keeps screen 332×664 (matches viewBox 360×720) */
  background: linear-gradient(180deg, #1c1c1c 0%, #0a0a0a 50%, #1c1c1c 100%);
  border-radius: 54px;
  padding: 14px;
  box-shadow:
    0 60px 140px rgba(0,0,0,0.7),
    0 0 0 2px #2a2a2a,
    inset 0 0 0 2px #050505,
    inset 0 0 60px rgba(0,0,0,0.6);
}
.dash__phone::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 56px;
  background: linear-gradient(135deg, rgba(255,255,255,0.06), transparent 40%, transparent 60%, rgba(255,255,255,0.04));
  pointer-events: none;
  z-index: 0;
}
.dash__phone-island {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 108px;
  height: 28px;
  background: #000;
  border-radius: 999px;
  z-index: 5;
  box-shadow: inset 0 0 0 1px #1a1a1a;
}
.dash__phone-island::after {
  content: "";
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #2a2a2a, #050505 70%);
}
.dash__phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 42px;
  overflow: hidden;
  background: #050505;
  z-index: 1;
}
.dash__phone-home {
  position: absolute;
  bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 110px; height: 4px;
  border-radius: 2px;
  background: #fff;
  opacity: 0.4;
  z-index: 6;
}
.dash__svg {
  display: block;
  width: 100%;
  height: 100%;
}
.dash__svg text { font-family: var(--im-font-sans); }

/* Screen slide-in between cycles */
.dash__svg .dash-screen {
  opacity: 0;
  animation: dashSlideIn .55s cubic-bezier(0.2,0.8,0.2,1) forwards;
}
@keyframes dashSlideIn {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Stage pill — anchored to the wrap (outside the bezel) */
.dash__stage-pill {
  position: absolute;
  top: 16px;
  right: 16px;
  font-family: var(--im-font-mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 6px 10px;
  background: rgba(0,0,0,0.7);
  border: 1px solid rgba(240,200,0,0.4);
  border-radius: 999px;
  color: var(--im-primary);
  z-index: 9;
  pointer-events: none;
}

@media (max-width: 880px) {
  .dash {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .dash__copy { max-width: 100%; order: 2; }
  .dash__phone-wrap { order: 1; }
  .dash__phone { transform: scale(0.95); }
}
@media (max-width: 480px) {
  .dash__phone { transform: scale(0.82); margin: -50px 0; }
}


/* === Closed-loop economics (.loop) — follows the dash section ===== */
.loop__chain {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 8px;
}
.loop__card {
  position: relative;
  background: var(--im-card);
  border: 1px solid var(--im-border);
  border-radius: 12px;
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.loop__card:not(:last-child)::after {
  content: "\2192";
  position: absolute;
  top: 24px;
  right: -17px;
  width: 16px;
  text-align: center;
  color: var(--im-fg-dim);
  font-family: var(--im-font-mono);
  font-size: 14px;
  z-index: 1;
}
.loop__card--dim { border-style: dashed; }
.loop__card--dim .loop__value { color: var(--im-fg-dim); }
.loop__card--hot {
  border-color: var(--im-primary);
  background: linear-gradient(180deg, rgba(240, 200, 0, 0.07), rgba(240, 200, 0, 0.02)), var(--im-card);
}
.loop__step {
  font-family: var(--im-font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--im-fg-dim);
  font-weight: 600;
}
.loop__value {
  font-size: clamp(30px, 3vw, 38px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.loop__value--hot { color: var(--im-primary); }
.loop__value--green { color: #1fa34a; }
.loop__note {
  font-size: 13px;
  line-height: 1.55;
  color: var(--im-fg-muted);
  text-wrap: pretty;
}
.loop__tag {
  margin-top: auto;
  align-self: flex-start;
  font-family: var(--im-font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--im-bg);
  background: var(--im-primary);
  padding: 4px 8px;
  border-radius: 3px;
}
.loop__tag--dim {
  background: none;
  color: var(--im-fg-dim);
  border: 1px solid var(--im-border);
}
.loop__feedback {
  margin-top: 18px;
  border: 1px dashed var(--im-border);
  border-radius: 12px;
  padding: 20px 24px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.loop__feedback-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--im-primary);
  color: var(--im-primary);
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 700;
}
.loop__feedback-title {
  font-family: var(--im-font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  font-weight: 700;
  color: var(--im-primary);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.loop__feedback-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--im-fg-muted);
  margin: 0;
  max-width: 760px;
  text-wrap: pretty;
}
@media (max-width: 980px) {
  .loop__chain { grid-template-columns: repeat(2, 1fr); }
  .loop__card:not(:last-child)::after { display: none; }
}
@media (max-width: 560px) {
  .loop__chain { grid-template-columns: 1fr; }
}


/* === Stage chip progress bar (all five story animations) ========== */
.fx-sat__stage > .fx-stage-prog {
  /* chip is a flex row — pin the bar along its bottom edge instead */
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 1px;
  overflow: hidden;
}
.fx-stage-prog i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--im-primary);
  transform: scaleX(0);
  transform-origin: left center;
  animation-name: fxStageProg;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes fxStageProg { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .fx-sat__stage > .fx-stage-prog { display: none; }
}