/* ============================================================
 * AIMO — Desktop product mockup (neutral-dark app theme)
 * A faithful, crisp HTML recreation of the Portfolio dashboard,
 * framed in a browser window for the landing "product peek".
 * Scoped under .app-mock so the green marketing theme is unaffected.
 * ============================================================ */

/* ---------- Showcase section shell ---------- */
.showcase { position: relative; padding: 8px 0 40px; }
body.hide-mock .showcase { display: none; }
body.no-frame .bw__bar { display: none; }
/* green-tinted variant of the app mock */
.app-mock.tint-green {
  --m-page: #06140d;
  --m-card: #0c1f14;
  --m-card-2: #12301d;
  --m-line: rgba(167,249,50,0.10);
  --m-line-strong: rgba(167,249,50,0.20);
}
.app-mock.tint-green .am-card { background: linear-gradient(180deg, #0d2316, #091a10); }
.showcase .wrap { max-width: 1200px; }
.showcase__frame {
  position: relative;
  /* subtle acid glow behind the frame */
}
.showcase__frame::before {
  content: ""; position: absolute; inset: -8% 4% -14% 4%; z-index: 0;
  background: radial-gradient(60% 60% at 50% 30%, var(--aimo-acid-green-12), transparent 72%);
  filter: blur(40px); pointer-events: none;
}

/* ---------- Browser window chrome ---------- */
.bw {
  position: relative; z-index: 1;
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--border-strong);
  background: #0c0c0c;
  box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 40px 90px -30px rgba(0,0,0,0.8);
}
.bw__bar {
  display: flex; align-items: center; gap: 16px;
  height: 46px; padding: 0 18px;
  background: #161616; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.bw__dots { display: flex; gap: 8px; flex: none; }
.bw__dots span { width: 12px; height: 12px; border-radius: 50%; background: #3a3a3a; }
.bw__url {
  flex: 1; max-width: 360px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 28px; border-radius: 8px;
  background: #0d0d0d; border: 1px solid rgba(255,255,255,0.06);
  font-family: var(--font-body); font-size: 12.5px; font-weight: 400; color: rgba(255,255,255,0.5);
}
.bw__url svg { width: 12px; height: 12px; color: var(--accent); }
.bw__spacer { flex: none; width: 52px; }

/* ============================================================
 * APP MOCK — neutral dark theme tokens (local to mockup)
 * ============================================================ */
.app-mock {
  --m-page: #0a0a0a;
  --m-card: #141414;
  --m-card-2: #1b1b1b;
  --m-line: rgba(255,255,255,0.07);
  --m-line-strong: rgba(255,255,255,0.12);
  --m-fg: #f4f4f4;
  --m-fg-2: rgba(255,255,255,0.62);
  --m-fg-3: rgba(255,255,255,0.40);
  --m-acid: #A7F932;
  background: var(--m-page);
  font-family: var(--font-body);
  color: var(--m-fg);
  font-weight: 300;
  user-select: none;
}

/* ---------- App nav ---------- */
.am-nav {
  display: flex; align-items: center; gap: 36px;
  height: 64px; padding: 0 28px;
  border-bottom: 1px solid var(--m-line);
}
.am-logo { height: 26px; width: auto; display: block; flex: none; }
.am-tabs { display: flex; align-items: center; gap: 30px; }
.am-tab {
  font-family: var(--font-body); font-size: 15px; font-weight: 400; color: var(--m-fg-2);
  position: relative; padding: 4px 0; white-space: nowrap;
}
.am-tab.is-active { color: var(--m-fg); font-weight: 500; }
.am-tab.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -21px; height: 2px; background: var(--m-acid);
}
.am-nav__right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.am-search {
  display: flex; align-items: center; gap: 10px;
  width: 240px; height: 40px; padding: 0 12px;
  border-radius: 10px; background: var(--m-card); border: 1px solid var(--m-line);
  color: var(--m-fg-3); font-size: 14px;
}
.am-search svg { width: 15px; height: 15px; flex: none; }
.am-search .am-kbd {
  margin-left: auto; font-size: 11px; color: var(--m-fg-3);
  background: rgba(255,255,255,0.06); border-radius: 5px; padding: 2px 6px; font-family: var(--font-body);
}
.am-deposit {
  display: inline-flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 18px; border-radius: 10px;
  background: var(--m-acid); color: #06160D;
  font-family: var(--font-body); font-weight: 600; font-size: 14px;
}
.am-deposit svg { width: 15px; height: 15px; }
.am-avatar { width: 40px; height: 40px; border-radius: 50%; background: #2a2a2a; border: 1px solid var(--m-line-strong); flex: none; display: flex; align-items: center; justify-content: center; color: var(--m-fg-3); }
.am-avatar svg { width: 18px; height: 18px; }

/* ---------- Body ---------- */
.am-body { padding: 30px 28px 0; }
.am-title { font-family: var(--font-body); font-weight: 600; font-size: 30px; color: var(--m-fg); margin: 0 0 22px; letter-spacing: -0.01em; }

.am-card {
  background: linear-gradient(180deg, #131313, #0f0f0f);
  border: 1px solid var(--m-line); border-radius: 16px;
}

/* value / chart card */
.am-value { padding: 26px 28px 0; position: relative; overflow: hidden; }
.am-value__head { display: flex; align-items: flex-start; justify-content: space-between; }
.am-eyebrow { font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--m-fg-3); }
.am-big {
  font-family: var(--font-body); font-weight: 600; font-size: 52px; line-height: 1.05;
  color: var(--m-fg); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin: 8px 0 10px;
}
.am-delta { display: inline-flex; align-items: baseline; gap: 10px; font-size: 16px; font-weight: 500; color: var(--m-acid); font-variant-numeric: tabular-nums; }
.am-delta .am-muted { color: var(--m-fg-3); font-weight: 400; font-size: 15px; }

.am-ranges { display: flex; gap: 2px; background: var(--m-card); border: 1px solid var(--m-line); border-radius: 10px; padding: 4px; flex: none; }
.am-range { font-size: 13px; font-weight: 500; color: var(--m-fg-3); padding: 6px 13px; border-radius: 7px; }
.am-range.is-active { background: #262626; color: var(--m-fg); }

/* chart */
.am-chart { position: relative; height: 300px; margin: 18px -28px 0; }
.pf-chart { display: block; width: 100%; height: 100%; }
.pf-line { fill: none; stroke: var(--m-acid); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.pf-area { fill: url(#pfFill); opacity: 0; transition: opacity 1.1s ease .35s; }
.pf-chart.is-drawn .pf-area { opacity: 1; }
.pf-dot-el { position: absolute; left: 0; top: 0; width: 9px; height: 9px; border-radius: 999px; background: var(--m-acid); box-shadow: 0 0 0 4px rgba(167,249,50,0.18); transform: translate(-50%, -50%); opacity: 0; transition: opacity .3s ease .9s; pointer-events: none; }
.pf-chart.is-drawn ~ .pf-dot-el { opacity: 1; }

.am-value__foot {
  display: flex; gap: 64px; padding: 20px 0 26px; margin-top: 6px; position: relative;
}
.am-stat .am-eyebrow { display: block; margin-bottom: 8px; }
.am-stat__row { display: inline-flex; align-items: baseline; gap: 10px; }
.am-stat b { font-family: var(--font-body); font-weight: 600; font-size: 22px; color: var(--m-acid); font-variant-numeric: tabular-nums; }
.am-stat .am-pct { font-size: 14px; font-weight: 500; color: var(--m-acid); }

/* ---------- wallet row ---------- */
.am-wallets { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 22px; }
.am-wallet { padding: 24px 26px; display: flex; flex-direction: column; }
.am-wallet__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.am-wallet__id { display: flex; gap: 14px; }
.am-wico { width: 42px; height: 42px; border-radius: 11px; background: var(--m-card-2); border: 1px solid var(--m-line); display: flex; align-items: center; justify-content: center; color: var(--m-fg-2); flex: none; }
.am-wico svg { width: 19px; height: 19px; }
.am-wallet__name { font-size: 18px; font-weight: 600; color: var(--m-fg); }
.am-wallet__sub { font-size: 13px; color: var(--m-fg-3); margin-top: 3px; }
.am-wallet__bal { text-align: right; }
.am-wallet__bal b { display: block; font-family: var(--font-body); font-weight: 600; font-size: 26px; color: var(--m-fg); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.am-wallet__bal .am-pct { font-size: 14px; font-weight: 500; color: var(--m-acid); }

.am-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.am-chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 13px 0 10px; border-radius: 999px; background: var(--m-card-2); border: 1px solid var(--m-line); font-size: 13.5px; color: var(--m-fg-2); }
.am-chip b { font-weight: 600; color: var(--m-fg); }
.am-coin { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; flex: none; }
.am-coin--usdc { background: #2775CA; }
.am-coin--eth  { background: #627EEA; }
.am-coin--btc  { background: #F7931A; }
.am-coin--hype { background: #143A25; color: var(--m-acid); }
.am-more { font-size: 13px; color: var(--m-fg-3); margin-top: 14px; }

.am-wallet__actions { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 24px; }
.am-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 10px; font-family: var(--font-body); font-weight: 500; font-size: 14px; }
.am-btn svg { width: 15px; height: 15px; }
.am-btn--primary { background: var(--m-acid); color: #06160D; font-weight: 600; }
.am-btn--ghost { background: transparent; border: 1px solid var(--m-line-strong); color: var(--m-fg); }
.am-btn--full { width: 100%; justify-content: center; background: var(--m-card-2); border: 1px solid var(--m-line); color: var(--m-fg); }
.am-spacer { margin-left: auto; }

/* trading wallet inner split */
.am-split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: 0; margin-top: 22px; padding: 22px 24px; background: var(--m-card); border: 1px solid var(--m-line); border-radius: 12px; }
.am-split__cell:last-child { padding-left: 24px; border-left: 1px solid var(--m-line); }
.am-split__cell .am-eyebrow { display: block; margin-bottom: 10px; }
.am-split__cell b { font-family: var(--font-body); font-weight: 600; font-size: 24px; color: var(--m-fg); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.am-split__cell .am-avail { display: block; font-size: 13px; color: var(--m-fg-3); margin-top: 6px; }

/* ---------- bottom strip (cut off, fades) ---------- */
.am-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 22px; }
.am-bottom__head { display: flex; align-items: center; justify-content: space-between; padding: 22px 26px 18px; }
.am-bottom__title { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 600; color: var(--m-fg); }
.am-count { font-size: 13px; font-weight: 600; color: var(--m-fg-3); background: var(--m-card-2); border-radius: 6px; padding: 2px 8px; }
.am-link { font-size: 14px; font-weight: 500; color: var(--m-acid); display: inline-flex; align-items: center; gap: 6px; }
.am-link svg { width: 14px; height: 14px; }
.am-fade { height: 30px; }

/* fade the very bottom of the mock so it reads as "scrolls further" */
.app-mock { position: relative; }
.app-mock::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px;
  background: linear-gradient(transparent, var(--m-page)); pointer-events: none;
}

/* ---------- responsive scaling of the mock ---------- */
@media (max-width: 1040px) {
  .am-big { font-size: 44px; }
  .am-search { width: 180px; }
}
@media (max-width: 820px) {
  .am-tabs, .am-search .am-kbd { display: none; }
  .am-wallets, .am-bottom { grid-template-columns: 1fr; }
  .am-chart { height: 240px; }
  .am-value__foot { gap: 36px; }
}
@media (max-width: 560px) {
  .am-nav { gap: 16px; padding: 0 16px; }
  .am-search { display: none; }
  .am-body { padding: 22px 16px 0; }
  .am-big { font-size: 36px; }
  .am-value, .am-wallet, .am-bottom__head { padding-left: 18px; padding-right: 18px; }
  .am-chart { margin-left: -18px; margin-right: -18px; }
  .am-wallet__actions { flex-wrap: wrap; }
}