/* ─────────────────────────────────────────────────────────────────────────
   Features: each tile shows its feature running instead of describing it.

   The section was six cards of icon, heading and paragraph — every one the
   same shape, all of them telling. This shows: a shipment moving through its
   real statuses, a conversation tied to an item, a radius widening, an
   earnings line drawing in. Copy drops to a title and one line per tile.

   The demos are drawn in HTML/CSS in the app's own visual language, so they
   read as the product rather than as illustrations of it. features.js runs
   them; without it every tile still shows a complete resting state.
   ───────────────────────────────────────────────────────────────────────── */

.fx { padding: clamp(80px, 10vw, 120px) 0; }
.fx-head { margin-bottom: clamp(32px, 4vw, 48px); max-width: 760px; }
.fx-head .sub { margin-bottom: 0; }

.fx-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(0, auto);
  gap: 18px;
}
/* Ship beside Chat, the three smaller tools under them, and the stream of
   products, services and jobs across the bottom. Chat used to span two rows,
   which stretched its thread to ~700px with four messages at the very bottom
   of an empty screen. It now matches the tracker's height. */
.fx-ship { grid-column: span 2; }
.fx-kinds { grid-column: 1 / -1; }

@media (max-width: 1100px) {
  .fx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .fx-grid { grid-template-columns: minmax(0, 1fr); }
  .fx-ship { grid-column: auto; }
}

/* ── Tile ────────────────────────────────────────────────────────────────── */

.fx-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: clamp(22px, 2.4vw, 30px);
  border-radius: 28px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
  border: 1px solid rgba(255, 255, 255, .09);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 24px 60px rgba(0, 0, 0, .3);
  overflow: hidden;
  min-width: 0;
}
.fx-copy { max-width: 46ch; }
.fx-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: 12px;
}
.fx-label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 3px rgba(201, 238, 10, .15);
}
.fx-tile h3 { font-size: clamp(21px, 1.8vw, 26px); margin: 0 0 8px; letter-spacing: -.02em; line-height: 1.15; }
.fx-tile p { color: var(--mute); margin: 0; font-size: 15px; line-height: 1.55; }

.fx-demo { position: relative; flex: 1; min-height: 0; display: flex; }
.fx-num { font-variant-numeric: tabular-nums; }

/* Shared mini-surface: the "screen" each demo sits on. */
.fx-screen {
  flex: 1;
  border-radius: 20px;
  background: rgba(7, 8, 15, .72);
  border: 1px solid rgba(255, 255, 255, .07);
  padding: 16px;
  min-width: 0;
}

/* ── Ship for me ─────────────────────────────────────────────────────────── */

.fx-ship { flex-direction: row; align-items: stretch; gap: clamp(20px, 3vw, 36px); }
.fx-ship .fx-copy { flex: 0 0 34%; display: flex; flex-direction: column; }
.fx-ship .fx-facts { display: grid; gap: 10px; margin-top: 28px; }
.fx-fact { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--mute); }
.fx-fact b { color: var(--ink); font-weight: 600; }
.fx-fact i {
  width: 28px; height: 28px; flex: none; border-radius: 9px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08);
  display: grid; place-items: center; color: var(--lime);
}
@media (max-width: 760px) {
  .fx-ship { flex-direction: column; }
  .fx-ship .fx-copy { flex: none; }
}

.ship-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.ship-ref { font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--mute); }
.ship-ref b { color: var(--ink); }
.ship-eta { font-size: 13px; color: var(--mute); }
.ship-eta b { color: var(--lime); font-size: 18px; font-weight: 700; margin-right: 2px; }
.ship-eta.is-done b { font-size: 13px; }

/* The row is as tall as the chat beside it, so the map grows to fill the
   tile. It scales to fit (meet), keeping the whole route in view, and the
   streets are drawn well past the viewBox so a taller box reveals more city
   instead of empty bands. */
.fx-ship .fx-screen { display: flex; flex-direction: column; }
.ship-map { display: block; width: 100%; flex: 1 1 auto; min-height: 150px; border-radius: 14px; background: rgba(255, 255, 255, .02); }
.ship-map .st { stroke: rgba(232, 236, 245, .07); stroke-width: 1; fill: none; }
.ship-map .rd { stroke: rgba(232, 236, 245, .14); stroke-width: 2.5; fill: none; stroke-linecap: round; }
.ship-map .ship-route { stroke: rgba(201, 238, 10, .18); stroke-width: 3; fill: none; stroke-linecap: round; stroke-dasharray: 2 7; }
.ship-map .ship-trail { stroke: var(--lime); stroke-width: 3; fill: none; stroke-linecap: round; }
.ship-map .pin { fill: #0a0b10; stroke: var(--ink); stroke-width: 2; }
.ship-map .pin.dest { stroke: var(--lime); }
.ship-map text { fill: var(--mute); font: 600 10px 'Poppins', system-ui, sans-serif; }
.ship-courier { fill: var(--lime); }
.ship-halo { fill: rgba(201, 238, 10, .22); transform-box: fill-box; transform-origin: center; animation: fx-halo 1.8s ease-out infinite; }
@keyframes fx-halo { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } }

.ship-steps {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px;
}
.ship-steps li { position: relative; padding-top: 14px; font-size: 11px; color: rgba(139, 144, 163, .7); line-height: 1.3; transition: color .4s; }
.ship-steps li::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 4px;
  background: rgba(255, 255, 255, .08); transition: background .4s;
}
.ship-steps li.done { color: var(--ink); }
.ship-steps li.done::before { background: var(--lime); }
.ship-steps li.now { color: var(--lime); }
.ship-steps li.now::before { background: linear-gradient(90deg, var(--lime), rgba(201, 238, 10, .25)); }

.ship-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; font-size: 13px; color: var(--mute); gap: 10px; flex-wrap: wrap; }
.ship-foot b { color: var(--ink); font-weight: 600; }
.fx-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: 999px;
  background: rgba(201, 238, 10, .1); color: var(--lime); border: 1px solid rgba(201, 238, 10, .25);
  white-space: nowrap;
}

/* ── Chat ────────────────────────────────────────────────────────────────── */

.fx-chat .fx-screen { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.chat-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid rgba(255, 255, 255, .06); background: rgba(255, 255, 255, .025); }
.chat-thumb { width: 40px; height: 40px; border-radius: 10px; flex: none; background: linear-gradient(140deg, #6b4a2f, #2a1c12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.chat-item b { display: block; font-size: 13px; font-weight: 600; }
.chat-item span { font-size: 12px; color: var(--lime); font-weight: 600; }
.chat-body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 14px; min-height: 224px; justify-content: flex-end; }
.bub { max-width: 82%; padding: 9px 13px; border-radius: 16px; font-size: 13px; line-height: 1.4; animation: fx-pop .35s cubic-bezier(.2, .9, .3, 1.2) both; }
.bub.them { align-self: flex-start; background: rgba(255, 255, 255, .07); border-bottom-left-radius: 6px; }
.bub.me { align-self: flex-end; background: var(--lime); color: #0a0b10; font-weight: 500; border-bottom-right-radius: 6px; }
.bub.sys {
  align-self: center; max-width: none; display: inline-flex; align-items: center; gap: 7px;
  background: rgba(201, 238, 10, .08); border: 1px solid rgba(201, 238, 10, .25); color: var(--lime);
  font-size: 12px; font-weight: 600; border-radius: 999px; padding: 7px 13px;
}
.bub small { display: block; font-size: 10px; opacity: .65; margin-top: 2px; text-align: right; }
.bub.typing { display: inline-flex; gap: 4px; padding: 12px 14px; }
.bub.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--mute); animation: fx-dot 1s infinite; }
.bub.typing i:nth-child(2) { animation-delay: .15s; }
.bub.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes fx-dot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
@keyframes fx-pop { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
.chat-input { margin: 0 14px 14px; padding: 11px 14px; border-radius: 999px; background: rgba(255, 255, 255, .05); color: rgba(139, 144, 163, .8); font-size: 13px; }

/* ── Near you ────────────────────────────────────────────────────────────── */

.fx-near .fx-screen { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.near-radar { display: block; width: 100%; max-width: 250px; height: auto; }
.near-radar .ring { fill: none; stroke: rgba(232, 236, 245, .08); stroke-width: 1; transition: stroke .5s, fill .5s; }
.near-radar .ring.on { stroke: rgba(201, 238, 10, .55); fill: rgba(201, 238, 10, .04); }
.near-radar .ring-l { fill: rgba(139, 144, 163, .7); font: 600 9px 'Poppins', system-ui, sans-serif; }
.near-radar .me { fill: var(--lime); }
.near-radar .me-pulse { fill: rgba(201, 238, 10, .3); transform-box: fill-box; transform-origin: center; animation: fx-halo 2.2s ease-out infinite; }
.near-radar .lp { fill: rgba(232, 236, 245, .18); transition: fill .45s, r .45s; }
.near-radar .lp.in { fill: var(--ink); }
.near-count { font-size: 13px; color: var(--mute); }
.near-count b { color: var(--ink); }

/* ── Seller hub ──────────────────────────────────────────────────────────── */

.hub-total small { display: block; font-size: 12px; color: var(--mute); margin-bottom: 2px; }
.hub-total b { font-size: clamp(24px, 2.3vw, 30px); font-weight: 700; letter-spacing: -.02em; }
.hub-total em { display: block; font-style: normal; font-size: 12px; color: var(--lime); font-weight: 600; margin-top: 3px; }
.hub-chart { display: block; width: 100%; height: auto; margin: 10px 0 12px; overflow: visible; }
.hub-line { fill: none; stroke: var(--lime); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hub-area { fill: url(#hubFill); }
.hub-dot { fill: var(--lime); }
.hub-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hub-stats div { padding: 9px 10px; border-radius: 12px; background: rgba(255, 255, 255, .04); }
.hub-stats small { display: block; font-size: 11px; color: var(--mute); }
.hub-stats b { font-size: 15px; font-weight: 700; transition: color .4s; }
.hub-stats b.bump { color: var(--lime); }

/* ── Sell ────────────────────────────────────────────────────────────────── */

.fx-sell .fx-screen { display: flex; flex-direction: column; gap: 10px; }
.sell-photo {
  height: 96px; border-radius: 14px; border: 1.5px dashed rgba(255, 255, 255, .14);
  display: grid; place-items: center; color: var(--mute); font-size: 12px;
  transition: background .5s, border-color .5s;
}
.sell-photo.filled { border-style: solid; border-color: transparent; background: linear-gradient(140deg, #6b4a2f, #2a1c12); color: transparent; }
.sell-field { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); font-size: 13px; min-height: 40px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sell-field span:first-child { color: var(--mute); font-size: 11px; }
.sell-field b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sell-field b.caret::after { content: ""; display: inline-block; width: 1.5px; height: 13px; background: var(--lime); margin-left: 2px; vertical-align: -2px; animation: fx-caret .8s steps(2) infinite; }
@keyframes fx-caret { 50% { opacity: 0; } }
.sell-btn {
  margin-top: 2px; border: 0; border-radius: 12px; padding: 11px; font: 700 13px 'Poppins', system-ui, sans-serif;
  background: var(--lime); color: #0a0b10; transition: transform .15s, background .3s, color .3s;
}
.sell-btn.press { transform: scale(.96); }
.sell-btn.live { background: rgba(201, 238, 10, .1); color: var(--lime); box-shadow: inset 0 0 0 1px rgba(201, 238, 10, .35); }

/* ── Not just things ─────────────────────────────────────────────────────── */

.fx-kinds { flex-direction: row; align-items: center; gap: clamp(20px, 3vw, 36px); }
.fx-kinds .fx-copy { flex: 0 0 30%; }
.kinds-rail {
  flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.kinds-track { display: flex; gap: 12px; width: max-content; animation: fx-rail 38s linear infinite; }
.kinds-rail:hover .kinds-track { animation-play-state: paused; }
@keyframes fx-rail { to { transform: translateX(-50%); } }
.kind {
  width: 190px; flex: none; padding: 14px; border-radius: 16px;
  background: rgba(7, 8, 15, .72); border: 1px solid rgba(255, 255, 255, .07);
}
.kind small {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, .06); color: var(--mute);
}
.kind small.svc { background: rgba(120, 150, 255, .12); color: #aebdff; }
.kind small.job { background: rgba(245, 166, 35, .12); color: #f5c46b; }
.kind b { display: block; font-size: 14px; font-weight: 600; margin: 10px 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kind span { font-size: 13px; color: var(--lime); font-weight: 600; }
@media (max-width: 760px) {
  .fx-kinds { flex-direction: column; align-items: stretch; }
  .fx-kinds .fx-copy { flex: none; }
}

/* ── Motion off ──────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .ship-halo, .near-radar .me-pulse, .bub, .bub.typing i, .sell-field b.caret::after { animation: none; }
  .kinds-track { animation: none; flex-wrap: wrap; width: auto; }
  .kinds-rail { -webkit-mask-image: none; mask-image: none; }
}