/* CoinStats API — v2 improvements layer. Loads AFTER api-site.css.
   Scope: header glass-on-scroll, nav tightening, hero sub size,
   badge consistency, footer expansion. Markup changes live in index-v2.html. */

/* 2 — header: transparent at top, frosted after scroll */
.hdr { transition: background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease; }
.hdr.scrolled {
  background: rgb(255 255 255 / 82%);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 1px 0 rgb(62 53 91 / 8%);
}

/* 3 — nav: tighter, no wrap; centered in the header */
.hdr .wrap { position: relative; }
.hdr__nav { gap: 23px; align-items: center; position: absolute; left: 50%; transform: translateX(-50%); margin-left: 0; }
.hdr__nav a { font-family: var(--cs-font-display); font-weight: var(--cs-fw-medium); font-size: 15.5px; white-space: nowrap; }

/* nav dropdowns */
.hdr__drop { position: relative; display: flex; align-items: center; }
.hdr__drop-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; background: none; border: 0; padding: 0;
  font-family: var(--cs-font-display); font-size: 15.5px; font-weight: var(--cs-fw-medium);
  color: #000000; white-space: nowrap; transition: opacity .15s; }
.hdr__drop-btn:hover { opacity: 0.6; }
.hdr__caret { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform .18s ease; }
.hdr__drop.open .hdr__caret { transform: rotate(225deg) translateY(-1px); }
.hdr__menu { position: absolute; top: calc(100% + 14px); left: -16px; min-width: 196px; z-index: 60;
  background: #fff; border: 1px solid rgb(62 53 91 / 8%); border-radius: 14px; padding: 8px;
  box-shadow: 0 18px 50px rgb(62 53 91 / 14%), 0 4px 12px rgb(62 53 91 / 6%);
  opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .16s ease, transform .16s ease; }
.hdr__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } /* hover bridge */
.hdr__drop.open .hdr__menu { opacity: 1; transform: none; pointer-events: auto; }
.hdr__menu a { display: block; padding: 9px 12px; border-radius: 9px; font-size: 14px; white-space: nowrap; }
.hdr__menu a:hover { background: var(--cs-surface-lilac); opacity: 1; }

/* 4 — hero sub back up to a readable size */
.hero__sub { font-size: 16px; max-width: 40ch; }

/* 7 — section badges match the hero badge: dot + label, no container */
.sec .cs-badge, .wben__head .cs-badge {
  background: none; border: none; box-shadow: none; padding: 0; border-radius: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--cs-font-body); font-weight: var(--cs-fw-semibold); font-size: 14px;
  letter-spacing: 0; text-transform: none; color: var(--cs-purple-ink); -webkit-text-fill-color: var(--cs-purple-ink);
}
.sec .cs-badge::before, .wben__head .cs-badge::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  background: var(--cs-gradient-button); box-shadow: 0 0 0 3px rgb(255 96 133 / 18%);
}
.mcp .cs-badge--on-dark { background: none; border: none; color: #fff; -webkit-text-fill-color: #fff; }
.mcp .cs-badge--on-dark::before { box-shadow: 0 0 0 3px rgb(255 255 255 / 16%); }

/* 10 — ghost button: clean white fill + soft shadow, no half-tone ring */
.api .cs-btn--ghost { background: #fff !important; color: var(--cs-purple-ink);
  box-shadow: 0 0 0 1px rgb(62 53 91 / 10%), 0 3px 14px rgb(62 53 91 / 13%); }
.api .cs-btn--ghost:hover { box-shadow: 0 0 0 1px rgb(62 53 91 / 18%), 0 6px 20px rgb(62 53 91 / 18%); }

/* 9 — hero badge: dot + label (status-marker style, clearly not a button) */
.hero { padding-top: 142px; } /* trimmed header→content distance */
@media (max-width: 600px) { .hero { padding-top: 100px; } }
.hero .cs-badge { background: none; border: none; box-shadow: none; padding: 0; border-radius: 0;
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--cs-font-body); font-weight: var(--cs-fw-semibold); font-size: 14px;
  letter-spacing: 0; text-transform: none; color: var(--cs-purple-ink); -webkit-text-fill-color: var(--cs-purple-ink); }
.hero .cs-badge::before { content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--cs-gradient-button); box-shadow: 0 0 0 3px rgb(255 96 133 / 18%); }

/* 10b — primary CTA: soft warm shadow to match the ghost button's depth */
.api .cs-btn--primary { box-shadow: 0 6px 18px rgb(255 96 133 / 25%); }
.api .cs-btn--primary:hover { box-shadow: 0 9px 24px rgb(255 96 133 / 33%); }

/* ============================================================
   11 — hero language rolled through the page
   ============================================================ */

/* tinted sections: hero's soft lavender→peach wash instead of flat lilac */
.sec--lilac { background: linear-gradient(115deg, #f6f1fd 0%, #faf3f4 55%, #fdf5ec 100%); }
.sec--bluewhite { background: linear-gradient(115deg, #f6f1fd 0%, #fdf5ec 100%); }

/* stat strip: gradient numbers (hero accent), soft tinted band, no hard rules */
/* stat strip: continue the demo's peach wash and fade into the white section below */
.stats { position: relative; border-top: none; border-bottom: none;
  background: linear-gradient(180deg, #ffffff 0%, #faf7fe 100%); }
.stats .wrap { position: relative; z-index: 1; }
.stat { border-left: 1px solid rgb(62 53 91 / 7%); }
.stat__n { background: var(--cs-gradient-button); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; }
.stat__l { color: #433962; }

/* cards: hub-card treatment — white, soft navy shadow, no hard border */
.gcard, .ucard { border: none; box-shadow: 0 8px 22px rgb(62 53 91 / 8%); }
.gcard:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgb(62 53 91 / 13%); }
.ucard { transition: transform .2s var(--cs-ease), box-shadow .2s var(--cs-ease); }
.ucard:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgb(62 53 91 / 13%); }

/* feature bullets/icon chips pick up the hub-card softness */
.feature__list .ic { color: var(--cs-green); }

/* comparison: soften the outer columns to match card language */
.cmp__col--hl { border: none; box-shadow: 0 26px 60px rgb(62 53 91 / 16%), 0 0 0 1px rgb(255 147 50 / 25%); }

/* MCP panel: glow wash like the hero, navy kept as contrast bookend */
.mcp::after { content: ""; position: absolute; width: 700px; height: 420px; border-radius: 50%; filter: blur(100px);
  background: var(--cs-orange); opacity: .10; bottom: -200px; left: -120px; pointer-events: none; }

/* 11b — feature eyebrows (DeFi, Market Data) → same dot+label as all badges */
.feature__eyebrow { color: var(--cs-purple-ink); text-transform: none; letter-spacing: 0;
  font-family: var(--cs-font-body); font-weight: var(--cs-fw-semibold); font-size: 14px;
  display: inline-flex; align-items: center; gap: 9px; }
.feature__eyebrow .ic { display: none; }
.feature__eyebrow::before { content: ""; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  background: var(--cs-gradient-button); box-shadow: 0 0 0 3px rgb(255 96 133 / 18%); }

/* footer: deep navy ink (brand), not near-black */
.ftr { background: var(--cs-purple-ink); }
.ftr .wrap { grid-template-columns: 1.4fr repeat(4, 1fr); }
@media (max-width: 720px) { .ftr .wrap { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   12 — deep hero alignment pass
   ============================================================ */

/* one heading navy everywhere (hero title color) */
.api { --cs-purple-ink-deep: var(--cs-purple-ink); }

/* icon chips → hero hub language: white circle, gradient icon, tinted ring */
.gcard__ic, .ucard__ic {
  width: 42px; height: 42px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 1px rgb(62 53 91 / 6%), 0 6px 16px rgb(229 72 255 / 22%);
}
.gcard__ic .ic, .ucard__ic .ic { width: 22px; height: 22px; background: var(--cs-gradient-icon); }
.gcard--hot .gcard__ic { background: #fff; }
.gcard--hot .gcard__ic .ic { background: var(--cs-gradient-icon); }
.wbcard__badge { background: #fff; box-shadow: 0 0 0 1px rgb(62 53 91 / 6%), 0 6px 16px rgb(229 72 255 / 30%); }
.wbcard__badge .ic { background: var(--cs-gradient-icon); color: transparent; }

/* card radii match hub cards */
.gcard, .ucard { border-radius: 18px; }

/* stat dividers echo the hero's dotted connectors */
.stat { border-left: 1px dashed rgb(62 53 91 / 20%); }

/* vendor chips: shadow-only, like hub cards (no hard border) */
.vchip { border: none; box-shadow: 0 8px 22px rgb(62 53 91 / 8%); }

/* 13 — headlines: no gradient text; emphasis inherits the heading color */
.sec__title b, .replace__title b, .feature__title b, .wben__title b, .cmp__callout b {
  background: none; background-clip: border-box; -webkit-background-clip: border-box;
  -webkit-text-fill-color: currentcolor; color: inherit; }
.mcp__title b { background: none; -webkit-text-fill-color: currentcolor; color: #fff; }

/* live-demo console → brand navy family (matches keycard / MCP / wallet cards) */
.lvconsole { background: linear-gradient(180deg, #4a3f6b, var(--cs-purple-ink)); border-color: rgb(255 255 255 / 12%); }

/* live-demo card: endpoint tabs + P&L colors */
.wm__tabs { display: flex; gap: 4px; margin-top: 14px; background: #f3f1f9; border-radius: 10px; padding: 3px; }
.wm__tab { flex: 1 1 0; border: 0; cursor: pointer; background: transparent; border-radius: 8px; padding: 6px 0;
  font-family: var(--cs-font-body); font-weight: var(--cs-fw-semibold); font-size: 12px; color: #6b6480; transition: all .15s; }
.wm__tab.active { background: #fff; color: var(--cs-purple-ink); box-shadow: 0 1px 4px rgb(62 53 91 / 12%); }
.wm__usd.pos { color: var(--cs-green); }
.wm__usd.neg { color: #F14A5A; }

/* DeFi tab hint: same gentle glow (cleared on first tab click) */
.wm__tab--hint { animation: lvhint 2.4s var(--cs-ease) infinite; }

/* hero → demo: tight seam, one clean wash (no clipped glow bands) */
.hero { padding-bottom: 0; }
#demo.sec--lilac { padding-top: 104px;
  background: linear-gradient(180deg, #ffffff 0%, #f8f4fd 30%, #fcf9f9 68%, #ffffff 100%); }
#demo .sec__head { margin-bottom: 32px; }

/* comparison: no highlighted column — semantic colors instead (green = CoinStats strengths, red = competitor gaps) */
.cmp__ribbon { display: none; }
.cmp .cmp__col--hl { background: none; border: none; box-shadow: none; border-radius: 0; }
.cmp .cmp__col--hl::before { content: none; }
.cmp .cmp__col--hl .cmp__head { padding-top: 0; }
.cmp .cmp__col--hl .cmp__cell { background: none; }
.cmp .cmp__col--hl .cmp__txt-strong { color: var(--cs-text-muted); font-weight: var(--cs-fw-regular); font-family: var(--cs-font-body); }
.cmp .no { color: #F14A5A; }
.cmp__bad { color: #F14A5A; }
.cmp__best { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--cs-text-muted); font-weight: var(--cs-fw-regular); }
.cmp__best small { font-family: var(--cs-font-body); font-size: 11px; font-weight: var(--cs-fw-bold); color: #fff; background: var(--cs-green); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }

/* closing CTA buttons: exactly the hero's size/style/shadow */
.cta__row .cs-btn { height: 45px; padding: 11px 34px; font-size: var(--cs-fs-16); line-height: var(--cs-lh-16); }

/* label → heading distance: 18px everywhere (the hero's rhythm) */
.sec .cs-badge, .wben__head .cs-badge, .feature__eyebrow { margin-bottom: 18px; }
.sec__title, .wben__title, .replace__title, .mcp__title, .feature__title { margin-top: 0; margin-bottom: 0; }
.wben__head { gap: 0; }
.wben__head .cs-btn { margin-top: 28px; }

/* comparison heading on a single row */
#compare .sec__head { max-width: 1000px; }
#compare .sec__title { font-size: clamp(28px, 3.4vw, 42px); }
@media (min-width: 760px) { #compare .sec__title { white-space: nowrap; } }
/* second table: market data compared */
#compare .cmp-scroll { background: #fff; border-radius: 20px; padding: 0; max-width: 1040px; margin: 0 auto; overflow: hidden auto;
  box-shadow: 0 0 0 1px rgb(62 53 91 / 7%), 0 10px 30px rgb(62 53 91 / 8%); }
#compare .cmp-scroll { overflow-x: auto; }
#compare .cmp__head { background: var(--cs-surface-lilac); }
.cmp2__title { display: block; font-size: clamp(24px, 2.6vw, 34px); margin: 84px auto 12px; text-align: center; white-space: normal;
  background: var(--cs-gradient-button); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.cmp2__sub { text-align: center; max-width: 60ch; margin: 0 auto 40px; }
/* bigger, more readable table text */
.cmp__cell { font-size: 16px; line-height: 1.35; }
.cmp__head { font-size: 19px; }
.cmp .ic { width: 21px; height: 21px; }
/* labels-column header: vertically centered like the other column headers
   (its flex-start was meant for horizontal rows, but the head is column-direction → it pinned to the top) */
.cmp__labels .cmp__head { justify-content: center; align-items: flex-start; }

/* ============================================================
   FAQ — divider list (clean, no boxes)
   ============================================================ */
.faq__list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; }
.faq details { border-bottom: 1px solid rgb(62 53 91 / 10%); }
.faq details:first-child { border-top: 1px solid rgb(62 53 91 / 10%); }
.faq summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 21px 6px; font-family: var(--cs-font-display); font-weight: var(--cs-fw-semibold); font-size: 18px; color: var(--cs-purple-ink-deep);
  transition: opacity .15s; }
.faq summary:hover { opacity: 0.6; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 18px; height: 18px; flex-shrink: 0; background: var(--cs-purple-ink);
  -webkit-mask: url(https://unpkg.com/lucide-static@latest/icons/plus.svg) center / contain no-repeat;
  mask: url(https://unpkg.com/lucide-static@latest/icons/plus.svg) center / contain no-repeat;
  transition: transform .2s var(--cs-ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq__a { margin: 0; padding: 0 56px 22px 6px; font-size: 15.5px; line-height: 1.6; color: var(--cs-text); max-width: 64ch; }

/* ============================================================
   DeFi protocol hub (option 1, integrated under stats)
   ============================================================ */
.dhub-sec .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 52px; }
.dhub-sec .feature__eyebrow { justify-content: center; white-space: nowrap; }
.dhub-sec .feature__title { max-width: none; white-space: nowrap; margin-left: auto; margin-right: auto; }
@media (max-width: 700px) { .dhub-sec .feature__title { white-space: normal; } }
.dhub { position: relative; width: 100%; max-width: 710px; margin: 0 auto; aspect-ratio: 560 / 268; }
.dhub__svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.dhub__addr { position: absolute; left: 50%; top: 7%; transform: translate(-50%, -50%); z-index: 1;
  display: flex; align-items: center; gap: 10px; background: radial-gradient(120% 130% at 50% 50%, #f5e4f5 0%, #fdf7fd 38%, #ffffff 70%);
  border-radius: 22px; padding: 14px 20px; box-shadow: 0 10px 30px rgb(62 53 91 / 12%), 0 2px 6px rgb(62 53 91 / 6%); white-space: nowrap; }
.dhub__addr .ic { width: 20px; height: 20px; background: var(--cs-gradient-icon); }
.dhub__addr code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 15px; color: var(--cs-purple-ink); font-weight: 600; }
.dcard { position: absolute; transform: translate(-50%, -50%); z-index: 1; background: #fff; border-radius: 18px;
  padding: 13px 16px; box-shadow: 0 0 0 1px rgb(229 72 255 / 10%), 0 8px 22px rgb(62 53 91 / 10%), 0 2px 12px rgb(255 96 133 / 7%); display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.dcard__ic { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; background: #fff;
  box-shadow: 0 0 0 1px rgb(62 53 91 / 6%), 0 6px 16px rgb(229 72 255 / 22%); display: flex; align-items: center; justify-content: center; }
.dcard__ic .ic { width: 18px; height: 18px; background: var(--cs-gradient-icon); }
.dcard__p { font-family: var(--cs-font-display); font-weight: var(--cs-fw-semibold); font-size: 14.5px; line-height: 1.15; color: var(--cs-purple-ink); }
.dcard__t { font-size: 11.5px; color: var(--cs-text-muted); }
.dcard__apy { margin-left: 6px; font-family: var(--cs-font-display); font-weight: var(--cs-fw-bold); font-size: 12.5px; color: var(--cs-green); }
.dc1 { left: 9%; top: 47%; } .dc2 { left: 50%; top: 53%; } .dc3 { left: 91%; top: 47%; }
.dc4 { left: 26%; top: 87%; } .dc5 { left: 74%; top: 87%; }
@media (prefers-reduced-motion: no-preference) {
  .dhub-sec.in-view .dhub__addr { animation: hubpulse 1.6s var(--cs-ease) infinite; }
  .dhub-sec.in-view .dc1 { animation: hubbreath 2s var(--cs-ease) 2s infinite; }
  .dhub-sec.in-view .dc2 { animation: hubbreath 2s var(--cs-ease) 2.4s infinite; }
  .dhub-sec.in-view .dc3 { animation: hubbreath 2s var(--cs-ease) 2.8s infinite; }
  .dhub-sec.in-view .dc4 { animation: hubbreath 2.4s var(--cs-ease) 3.5s infinite; }
  .dhub-sec.in-view .dc5 { animation: hubbreath 2.4s var(--cs-ease) 3.9s infinite; }
  .dhub-sec.in-view .dhub__svg .flow { animation: hubdash 0.9s linear infinite; }
}
@media (max-width: 560px) {
  .dcard { padding: 9px 11px; gap: 8px; border-radius: 14px; }
  .dcard__p { font-size: 12px; } .dcard__t { font-size: 10px; } .dcard__apy { font-size: 10.5px; }
  .dcard__ic { width: 26px; height: 26px; } .dcard__ic .ic { width: 13px; height: 13px; }
}
.dhub__svg--col { display: none; }
@media (max-width: 600px) {
  .dhub { aspect-ratio: auto; height: auto; max-width: 430px; display: flex; flex-direction: column; align-items: center; gap: 12px; position: relative; }
  .dhub__svg--grid { display: none; }
  .dhub__svg--col { display: block; position: absolute; inset: 0; z-index: 0; }
  .dhub__addr, .dcard { position: relative; z-index: 1; transform: none; left: auto; right: auto; top: auto; bottom: auto; }
  .dhub__addr { align-self: center; margin-bottom: 4px; }
  .dcard { width: 56%; justify-content: flex-start; }
  .dcard__ic { width: 34px; height: 34px; } .dcard__ic .ic { width: 17px; height: 17px; }
  .dcard__p { font-size: 14px; } .dcard__t { font-size: 11.5px; } .dcard__apy { font-size: 12.5px; margin-left: auto; }
}
@media (max-width: 600px) and (prefers-reduced-motion: no-preference) {
  .dc1 { animation: hubbreath 2.2s var(--cs-ease) 2.2s infinite; }
  .dc2 { animation: hubbreath 2.4s var(--cs-ease) 2.9s infinite; }
  .dc3 { animation: hubbreath 2.6s var(--cs-ease) 3.5s infinite; }
  .dc4 { animation: hubbreath 2.8s var(--cs-ease) 4.1s infinite; }
  .dc5 { animation: hubbreath 3s   var(--cs-ease) 4.7s infinite; }
}

/* section-flow wash: every seam after the Live Demo shares a color with its neighbor */
.dhub-sec { background: linear-gradient(180deg, #faf7fe 0%, #f7f2fc 55%, var(--cs-surface-lilac) 100%); }
.pnl-sec.sec--lilac { background:
  radial-gradient(48vw 420px at -6vw 45%, rgb(229 72 255 / 11%), transparent 68%),
  linear-gradient(180deg, var(--cs-surface-lilac) 0%, var(--cs-surface-lilac) 72%, #ffffff 100%); }

/* use-case cards: lift off the white bg (was merging) */
.uses .ucard { border: none; box-shadow: 0 0 0 1px rgb(62 53 91 / 7%), 0 8px 22px rgb(62 53 91 / 8%); }

/* MCP: centered, matching the page's center logic */
.mcp .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 36px; }
.mcp__title { margin-left: auto; margin-right: auto; }
.mcp__body { max-width: 62ch; margin-left: auto; margin-right: auto; }
.mcp__clients { justify-content: center; }
.mcp__panel { width: 100%; max-width: 620px; background: #fff; border: none; box-shadow: 0 24px 60px rgb(0 0 0 / 30%); }
.mcp__label { color: var(--cs-text-subtle); }
.mcp__url { background: var(--cs-surface-lilac); color: var(--cs-purple-ink); font-weight: 600; }
.mcp__url .ic { color: var(--cs-purple-ink); opacity: .55; }
.mcp__copy { border: 0; background: transparent; cursor: pointer; padding: 4px; margin: -4px; border-radius: 8px; display: inline-flex; align-items: center; transition: background .15s; flex-shrink: 0; }
.mcp__copy:hover { background: rgb(147 93 235 / 12%); }
.mcp__copy:hover .ic { opacity: .9; }
.mcp__copy.copied .ic { -webkit-mask-image: url(https://unpkg.com/lucide-static@latest/icons/check.svg); mask-image: url(https://unpkg.com/lucide-static@latest/icons/check.svg); color: var(--cs-green); opacity: 1; }
.mcp__steps li { color: var(--cs-text); }
.mcp__steps .n { background: var(--cs-gradient-icon); color: #fff; }
.mcp__cta { margin-top: 28px; padding: 9px 25px !important; height: auto !important;
  background: #f2effb !important;
  box-shadow: 0 8px 22px rgb(62 53 91 / 12%); transition: transform .18s var(--cs-ease), box-shadow .18s var(--cs-ease); }
.mcp__cta::before { background: none !important; }
.mcp__cta span { color: var(--cs-purple-ink-deep); font-size: 16px; }
.mcp__cta:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgb(62 53 91 / 16%); }
.mcp__steps li { text-align: left; }

/* Market Data: centered head + featured chart + movers */
.mk-head { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 48px; }
.mk-head .sec__sub { max-width: 62ch; }
.mcoin { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 16px; padding: 14px 18px;
  box-shadow: 0 0 0 1px rgb(229 72 255 / 8%), 0 8px 22px rgb(62 53 91 / 8%); white-space: nowrap; }
.mcoin img { width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgb(62 53 91 / 8%); }
.mcoin__sym { font-family: var(--cs-font-display); font-weight: var(--cs-fw-semibold); font-size: 15px; color: var(--cs-purple-ink); }
.mcoin__name { font-size: 11.5px; color: var(--cs-text-muted); }
.mcoin__px { font-family: var(--cs-font-display); font-weight: var(--cs-fw-bold); font-size: 15px; color: var(--cs-purple-ink); margin-left: 8px; font-variant-numeric: tabular-nums; }
.mcoin__chg { font-size: 12.5px; font-weight: var(--cs-fw-bold); font-variant-numeric: tabular-nums; }
.mcoin__chg.up { color: var(--cs-green); } .mcoin__chg.down { color: #F14A5A; }
.mcoin svg { width: 64px; height: 26px; }
.chartwall { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; max-width: 1000px; margin: 0 auto; }
@media (max-width: 860px) { .chartwall { grid-template-columns: 1fr; } }
.bigchart { background: #fff; border-radius: 20px; padding: 22px; box-shadow: 0 0 0 1px rgb(229 72 255 / 8%), 0 8px 22px rgb(62 53 91 / 8%); }
.bigchart__hd { display: flex; align-items: center; gap: 10px; }
.bigchart__hd img { width: 28px; height: 28px; }
.bigchart__px { margin-left: auto; text-align: right; }
.bigchart svg.main { width: 100%; height: 180px; margin-top: 14px; }
.movers { display: flex; flex-direction: column; gap: 12px; }
.movers .mcoin svg { margin-left: auto; }

/* Market featured chart: timeframe tabs + price/time axes + hi/lo markers */
.bchart-tabs { display: flex; gap: 4px; margin: 16px 0 14px; flex-wrap: wrap; }
.bchart-tabs button { border: 0; cursor: pointer; background: transparent; color: var(--cs-text-muted);
  font-family: var(--cs-font-body); font-weight: var(--cs-fw-semibold); font-size: 12.5px; font-variant-numeric: tabular-nums;
  padding: 5px 11px; border-radius: 8px; transition: color .15s, background .15s; }
.bchart-tabs button:hover { color: var(--cs-purple-ink); }
.bchart-tabs button.active { background: var(--cs-surface-lilac); color: var(--cs-purple); }
.bchart-plot { display: flex; gap: 10px; height: 180px; }
.bchart-svgwrap { position: relative; flex: 1; min-width: 0; }
.bchart-svgwrap svg { width: 100%; height: 100%; display: block; }
.bchart-y { width: 64px; display: flex; flex-direction: column; justify-content: space-between; text-align: right;
  font-size: 11px; color: var(--cs-text-subtle); font-variant-numeric: tabular-nums; padding: 2px 0; white-space: nowrap; }
.bchart-x { display: flex; justify-content: space-between; margin: 8px 74px 0 0; font-size: 11px;
  color: var(--cs-text-subtle); font-variant-numeric: tabular-nums; }
.bchart-hl { position: absolute; transform: translate(-50%, -50%); z-index: 2; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.bchart-hl__dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.bchart-hl__lbl { font-size: 10.5px; font-weight: var(--cs-fw-bold); color: #fff; background: var(--cs-purple-ink);
  border-radius: 999px; padding: 3px 9px; font-variant-numeric: tabular-nums; }
.bchart-hl.is-high .bchart-hl__dot { background: var(--cs-green); }
.bchart-hl.is-low .bchart-hl__dot { background: #F14A5A; }
/* separated dot + label (label offset so it never clips an edge) */
.bchart-dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%);
  z-index: 3; box-shadow: 0 0 0 3px #fff; }
.bchart-dot.is-high { background: var(--cs-green); }
.bchart-dot.is-low { background: #F14A5A; }
.bchart-tag { position: absolute; transform: translateY(-50%); z-index: 3; font-size: 10.5px; font-weight: var(--cs-fw-bold);
  color: #fff; background: var(--cs-purple-ink); border-radius: 999px; padding: 3px 9px; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* FAQ category tabs (cryptoapis-style pills) */
.faq__tabs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: -24px 0 40px; }
.faq__tabs button { border: 0; cursor: pointer; background: transparent; color: var(--cs-text-muted);
  font-family: var(--cs-font-body); font-weight: var(--cs-fw-semibold); font-size: 15px;
  padding: 10px 22px; border-radius: 999px; transition: color .15s, background .15s; }
.faq__tabs button:hover { color: var(--cs-purple-ink); }
.faq__tabs button.active { background: var(--cs-surface-lilac); color: var(--cs-purple); }

/* SEO prose: about-block removed; inline "learn more" expanders */
.lm { margin-top: 14px; }
.lm summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: var(--cs-fw-semibold); color: var(--cs-purple); }
.lm summary::-webkit-details-marker { display: none; }
.lm summary::after { content: "+"; font-weight: 700; }
.lm[open] summary::after { content: "–"; }
.lm > p { margin: 10px auto 0; max-width: 62ch; font-size: 14.5px; line-height: 1.6; color: var(--cs-text-muted); text-align: center; }

/* Portfolio & P&L section (under the DeFi hub) */
.pnl-sec { position: relative; overflow: hidden; }
.pnl-sec .wrap { position: relative; z-index: 1; }
.pnl-sec .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pnl__ep { display: inline-flex; align-items: center; gap: 9px; background: #fff; border-radius: 10px; padding: 8px 14px;
  box-shadow: 0 0 0 1px rgb(62 53 91 / 8%), 0 4px 14px rgb(62 53 91 / 7%);
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13.5px; }
.pnl__ep .get { font-weight: 700; font-size: 11px; color: var(--cs-green); letter-spacing: .03em; }
.pnl__ep code { color: var(--cs-purple-ink); font-weight: 600; }
.pnl__ep .sep { width: 1px; height: 16px; background: rgb(62 53 91 / 15%); margin: 0 3px; }
.pnl-sec .feature__eyebrow { justify-content: center; white-space: nowrap; }
.pnl-sec .sec__sub { max-width: 62ch; }
.pnl__cards { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; margin-top: 48px; }
#pnlCards .wm:nth-child(3) { order: -1; }
.pnl__cards .wm { width: 330px; margin-top: 0; text-align: left;
  box-shadow: 0 0 0 1px rgb(229 72 255 / 10%), 0 8px 22px rgb(62 53 91 / 10%), 0 2px 12px rgb(255 96 133 / 7%); }
.pnl__label { font-size: 12px; font-weight: var(--cs-fw-bold); letter-spacing: .05em; text-transform: uppercase; color: #8a8499; white-space: nowrap; }

/* allocation stacked bar + legend */
.pnl-bar { display: flex; gap: 3px; height: 12px; border-radius: 999px; overflow: hidden; margin: 14px 0 4px; }
.pnl-bar i { display: block; height: 100%; border-radius: 999px; width: 0; transition: width .9s cubic-bezier(.25,.1,.25,1); }
.pnl-sec .in .pnl-bar i { width: var(--fw); }
.pnl-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.wm__rows--tight { gap: 8px; }
.wm__rows--tight .wm__row { gap: 10px; }

/* scroll-in animation: count-up totals + staggered rows */
.pnl__cards .wm { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--cs-ease), transform .5s var(--cs-ease); }
#pnlCards.in .wm { opacity: 1; transform: none; }
.pnl__cards .wm:nth-child(2) { transition-delay: .1s; }
.pnl__cards .wm:nth-child(3) { transition-delay: .2s; }
.pnl-sec .wm__row { opacity: 0; transform: translateX(8px); transition: opacity .4s var(--cs-ease), transform .4s var(--cs-ease); }
#pnlCards.in .wm__row { opacity: 1; transform: none; }
#pnlCards.in .pnl-bar i { width: var(--fw); }
@media (prefers-reduced-motion: reduce) {
  .pnl__cards .wm, .pnl-sec .wm__row { opacity: 1; transform: none; }
  .pnl-sec .pnl-bar i { width: var(--fw); transition: none; }
}

/* Live Demo head: same badge→heading rhythm as the hero (18px) + gently pulsing dot */
/* hub diagram: trim the empty bottom of its canvas (content ends ~76% down) so the hero ends with the diagram */
.hero .hubviz { margin-bottom: -22%; }
@media (max-width: 480px) { .hero .hubviz { margin-bottom: 0; } }
/* desktop shows the grid SVG, mobile shows the column SVG */
.hubviz__svg--col { display: none; }
@keyframes hubvflow { from { background-position: 0 0; } to { background-position: 0 10px; } }

/* mobile: hide header CTA, show floating CTA on scroll; app-UI card above code in Live Demo */
.hdr__float { display: none; }
@media (max-width: 600px) {
  .cs-btn--header { display: none; }
  .hdr__float { display: inline-flex; align-items: center; justify-content: center;
    position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%) translateY(150%);
    z-index: 90; background: var(--cs-gradient-button); color: #fff;
    font-family: var(--cs-font-display); font-weight: var(--cs-fw-semibold); font-size: 16px;
    padding: 14px 32px; border-radius: 999px; box-shadow: 0 12px 30px rgb(255 96 133 / 38%);
    opacity: 0; pointer-events: none; transition: transform .32s var(--cs-ease), opacity .32s var(--cs-ease); }
  .hdr__float.show { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; }
  .hdr__float, .hdr__float span { color: #fff !important; }
  .lvbody .lvstage { order: -1; border-bottom: 1px solid rgb(255 255 255 / 10%); }
}
#demo .sec__head { max-width: 900px; }
@media (min-width: 700px) { #demo .sec__title { white-space: nowrap; } }
#demo .sec__head .cs-badge { margin-bottom: 18px; }
#demo .sec__title { margin: 0; }
#demo .cs-badge::before { animation: demodot 2.6s var(--cs-ease) infinite; }
@keyframes demodot {
  0%, 100% { box-shadow: 0 0 0 3px rgb(255 96 133 / 18%); }
  50% { box-shadow: 0 0 0 7px rgb(255 96 133 / 8%); }
}
@media (prefers-reduced-motion: reduce) { #demo .cs-badge::before { animation: none; } }

/* "Stop Stitching" section: content centered along the page (affiliate-page logic) */
.replace .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 44px; }
.replace .wrap > div:first-child { display: flex; flex-direction: column; align-items: center; max-width: 720px; }
.replace__list { text-align: left; }
.replace .stackviz { width: 100%; max-width: 420px; }

/* live-demo chip hint: gentle glow so users see chips are clickable (cleared on first click) */
.lvchip--hint { animation: lvhint 2.4s var(--cs-ease) infinite; }
@keyframes lvhint {
  0%, 100% { box-shadow: 0 0 0 0 rgb(255 96 133 / 0%); }
  50% { box-shadow: 0 0 0 5px rgb(255 96 133 / 22%); }
}
@media (prefers-reduced-motion: reduce) { .lvchip--hint { animation: none; } }

/* ============================================================
   13 — headlines: solid ink everywhere, no gradient emphasis
   ============================================================ */
.sec__title b, .wben__title b, .replace__title b, .feature__title b,
.cta__title b, .cta__title span, .hero__title b {
  background: none !important; -webkit-text-fill-color: currentColor !important; color: inherit; }
.mcp__title b { background: none !important; -webkit-text-fill-color: #fff !important; color: #fff; }

/* 5 — converted CTA anchors: restore white text (beats `.api a { color: inherit }`) */
.api a.cs-btn--primary, .api a.cs-btn--primary > * { color: var(--cs-bg); }

/* 8 — footer bottom bar with legal links */
.ftr .wrap:has(.ftr__bar) { display: block; }
.ftr__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ftr__legal { display: flex; align-items: center; gap: 18px; }
.ftr__legal a { font-size: 13px; color: rgb(255 255 255 / 55%); transition: color .15s; }
.ftr__legal a:hover { color: #fff; }

/* 10 — hub diagram: legible stacked layout on small screens */
@media (max-width: 480px) {
  .hubviz { max-width: 100%; aspect-ratio: auto; height: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 8px 0 4px; }
  .hubviz { position: relative; }
  .hubviz__svg--grid { display: none; }
  .hubviz__svg--col { display: block; position: absolute; inset: 0; z-index: 0; }
  .hubnode, .hubcard, .hubcheap { position: relative; z-index: 1; transform: none; left: auto; right: auto; top: auto; bottom: auto; }
  .hubcard { width: 100%; max-width: 280px; justify-content: flex-start; }
  .hubnode { margin-bottom: 4px; }
  .hubcheap { margin-top: 4px; }
}
/* mobile: re-sync each card's glow to its column packet's arrival (begin + travel) */
@media (max-width: 480px) and (prefers-reduced-motion: no-preference) {
  .hub-market    { animation: hubbreath 2.2s var(--cs-ease) 2.2s infinite; }
  .hub-wallets   { animation: hubbreath 2.4s var(--cs-ease) 2.9s infinite; }
  .hub-defi      { animation: hubbreath 2.6s var(--cs-ease) 3.5s infinite; }
  .hub-portfolio { animation: hubbreath 2.8s var(--cs-ease) 4.1s infinite; }
  .hub-security  { animation: hubbreath 3s   var(--cs-ease) 4.7s infinite; }
}

/* ============================================================
   Page-wide background wash: each section's BOTTOM edge color
   equals the next section's TOP edge color, so the whole page
   reads as one continuous vertical gradient. Dark blocks (MCP,
   footer) are intentional contrast anchors (white→navy→white).
   Chain: demo(▸white) · stats(white▸L1) · defi-hub(L1▸L2) ·
   portfolio(L2▸L1) · market(L1▸white) · usecases(white) ·
   [MCP navy] · compare(white▸L1) · cta(L1▸L2) · faq(L2▸white) · [footer navy]
   L1 #faf7fe · L2 #f4effd
   ============================================================ */
#portfolio.pnl-sec.sec--lilac { background:
  radial-gradient(48vw 420px at -6vw 45%, rgb(229 72 255 / 10%), transparent 68%),
  linear-gradient(180deg, #f4effd 0%, #faf7fe 100%); }
#market.sec--lilac { background: linear-gradient(180deg, #faf7fe 0%, #ffffff 100%); }
#usecases { position: relative; background:
  radial-gradient(56vw 340px at 84% 45%, rgb(255 147 50 / 6%), transparent 72%),
  radial-gradient(58vw 360px at 12% 96%, rgb(229 72 255 / 7%), transparent 72%),
  linear-gradient(180deg, #ffffff 0%, #fdfbff 50%, #ffffff 100%); }
/* 20% less space at the Market → What You Can Build seam */
#market { padding-bottom: 83px; }
#usecases { padding-top: 83px; }
/* mobile: tighten comparison tables so the Feature column isn't oversized */
@media (max-width: 600px) {
  .cmp { min-width: 660px; }
  .cmp__labels { flex: 1.25 1 0; position: sticky; left: 0; z-index: 6; background: #fff; box-shadow: 1px 0 0 rgb(62 53 91 / 8%); }
  .cmp__labels .cmp__cell { background: #fff; }
  .cmp__cell { padding-left: 14px; padding-right: 14px; }
  .cmp__labels .cmp__cell { padding-right: 8px; }
  /* freeze the header row: cap the table height so it scrolls in its own box, head sticks to top */
  #compare .cmp-scroll { max-height: 76vh; overflow: auto; -webkit-overflow-scrolling: touch; }
  .cmp__head { position: sticky; top: 0; z-index: 5; }
  #compare .cmp__head { background: var(--cs-surface-lilac); }
  .cmp__labels .cmp__head { z-index: 8; background: var(--cs-surface-lilac); }
}
#usecases .wrap { position: relative; z-index: 1; }
#compare { background: linear-gradient(180deg, #ffffff 0%, #faf7fe 100%); }
.cta.sec--bluewhite { background:
  radial-gradient(62% 90% at 0% 50%, rgb(229 72 255 / 11%), transparent 60%),
  radial-gradient(62% 90% at 100% 50%, rgb(255 147 50 / 11%), transparent 60%),
  linear-gradient(180deg, #faf7fe 0%, #f4effd 100%); }
.cta.sec--bluewhite .cta__glow { display: none; }
#faq { background: linear-gradient(180deg, #f4effd 0%, #ffffff 100%); }

/* tighter seams (20% less) around DeFi hub · Portfolio · Market */
#defi-hub { padding-bottom: 83px; }
#portfolio { padding-top: 83px; padding-bottom: 83px; }
#market.sec--lilac { padding-top: 83px; }