/* CoinStats API — landing/site styles. Layout only; all color/type/spacing
   comes from the design system tokens (../styles.css). */

.api { font-family: var(--cs-font-body); color: var(--cs-text); background: var(--cs-bg); margin: 0; }
.api *, .api *::before, .api *::after { box-sizing: border-box; }
.api img { max-width: 100%; display: block; }
.api a { color: inherit; text-decoration: none; }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 720px) { .wrap { padding: 0 20px; } }

/* lucide icon via mask, filled with a token color */
.ic { display: inline-block; width: 24px; height: 24px; background: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }

/* ---------------- header ---------------- */
.hdr { position: sticky; top: 0; z-index: 50; height: 72px; display: flex; align-items: center;
  background: transparent; border-bottom: none; }
.hdr .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.hdr__brand { display: flex; align-items: center; gap: 4px; }
.hdr__brand img { height: 24px; }
a.hdr__tag { font-family: "Roboto", Arial, Helvetica, sans-serif; font-weight: var(--cs-fw-regular); font-size: 18px; line-height: 26px;
  letter-spacing: 0; color: #000000; display: inline-flex; align-items: center; }
a.hdr__tag .hdr__slash { color: #000000; font-weight: var(--cs-fw-regular); }
.hdr__nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.hdr__nav a { font-family: "Roboto", Arial, Helvetica, sans-serif; font-size: 15px; color: #000000; font-weight: var(--cs-fw-regular); transition: opacity .15s; }
.hdr__nav a:hover { opacity: 0.6; }
@media (max-width: 860px) { .hdr__nav { display: none; } }

/* mobile hamburger + menu (≤860px) */
.hdr__burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px;
  border: 0; background: transparent; cursor: pointer; padding: 9px; margin-left: 4px; }
.hdr__burger span { display: block; height: 2px; width: 100%; background: var(--cs-purple-ink-deep); border-radius: 2px; transition: transform .2s var(--cs-ease), opacity .2s var(--cs-ease); }
.hdr__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hdr__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hdr__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 860px) { .hdr__burger { display: flex; } }

.mnav { position: fixed; top: 72px; left: 0; right: 0; z-index: 49; background: rgb(255 255 255 / 97%);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid rgb(62 53 91 / 10%);
  padding: 12px 20px 24px; display: flex; flex-direction: column; max-height: calc(100vh - 72px); overflow-y: auto;
  box-shadow: 0 20px 40px rgb(62 53 91 / 12%); }
.mnav[hidden] { display: none; }
.mnav__group { font-family: var(--cs-font-body); font-size: 12px; font-weight: var(--cs-fw-bold); letter-spacing: .06em;
  text-transform: uppercase; color: var(--cs-text-subtle); margin: 16px 0 4px; }
.mnav__group:first-child { margin-top: 6px; }
.mnav a { font-family: var(--cs-font-body); font-size: 17px; font-weight: var(--cs-fw-medium); color: var(--cs-purple-ink-deep);
  padding: 11px 6px; border-radius: 10px; text-decoration: none; }
.mnav a:active { background: var(--cs-surface-lilac); }

/* ---------------- hero (shared) ---------------- */
.hero { position: relative; overflow: hidden; margin-top: -72px; padding: 168px 0 80px; z-index: 3; }
.hero__glow { position: absolute; border-radius: 50%; filter: blur(80px); z-index: 0; pointer-events: none; }
.hero__glow--o { width: 56vw; height: 480px; right: -14vw; top: -160px; background: var(--cs-orange); opacity: .14; }
.hero__glow--m { width: 56vw; height: 480px; left: -16vw; top: -120px; background: var(--cs-magenta); opacity: .12; }
.hero .wrap { position: relative; z-index: 2; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; }
@media (max-width: 920px) { .hero .wrap { grid-template-columns: 1fr; gap: 44px; } }

/* hero badge — navy outline, transparent fill */
.hero .cs-badge { background: transparent; color: var(--cs-purple-ink); border: 1.5px solid var(--cs-purple-ink);
  box-shadow: none; border-radius: var(--cs-r-24); padding: 7px 18px;
  font-family: var(--cs-font-body); font-weight: var(--cs-fw-semibold); font-size: 14px; letter-spacing: 0; text-transform: none;
  display: inline-flex; align-items: center; }
.hero .cs-badge::before { content: none; }
.hero .cs-badge::after { content: none; }
.hero__title { font-family: var(--cs-font-display); font-weight: var(--cs-fw-bold); color: var(--cs-purple-ink);
  font-size: clamp(40px, 5vw, 62px); line-height: 1.04; letter-spacing: -0.015em; margin: 18px 0 0; text-wrap: balance; }
.hero__title b { background: var(--cs-gradient-heading); background-clip: text; -webkit-text-fill-color: transparent; font-weight: var(--cs-fw-bold); }
.hero__sub { margin: 22px 0 0; font-size: 14px; line-height: 1.55; color: var(--cs-text); max-width: 43ch; }
.hero__cta { margin: 32px 0 0; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* hero CTAs ~30% smaller than the DS default */
.hero__cta .cs-btn { height: 45px; padding: 11px 34px; font-size: var(--cs-fs-16); line-height: var(--cs-lh-16); }
.hero__trust { margin: 22px 0 0; display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--cs-text-muted); }
.hero__trust b { color: var(--cs-purple-ink); font-weight: var(--cs-fw-semibold); }

/* Trustpilot rating widget (replaces the user-count trust line) */
.tpilot { margin: 22px 0 0; display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--cs-text-muted); text-decoration: none; }
.tpilot__great { font-weight: var(--cs-fw-bold); color: var(--cs-purple-ink-deep); }
.tpilot__stars { display: inline-flex; gap: 2px; }
.tpilot__stars i { width: 16px; height: 16px; border-radius: 3px; background: #00B67A;
  -webkit-mask: var(--tp-star) center / 80% no-repeat; mask: var(--tp-star) center / 80% no-repeat;
  background-clip: border-box; position: relative; }
/* tile = green square + white star punched out: use a wrapper approach instead */
.tpilot__stars i { -webkit-mask: none; mask: none;
  background:
    var(--tp-star-w) center / 78% no-repeat,
    #00B67A; }
.tpilot__stars i.half { background:
    var(--tp-star-w) center / 78% no-repeat,
    linear-gradient(90deg, #00B67A 50%, #dcdce6 50%); }
.tpilot { --tp-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 2l2.9 6.9 7.1.6-5.4 4.7 1.7 7L12 17.9 5.7 21.2l1.7-7L2 9.5l7.1-.6z'/%3E%3C/svg%3E");
  --tp-star-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 2l2.9 6.9 7.1.6-5.4 4.7 1.7 7L12 17.9 5.7 21.2l1.7-7L2 9.5l7.1-.6z'/%3E%3C/svg%3E"); }
.tpilot__rev { color: var(--cs-text-muted); }
.tpilot__rev b { color: var(--cs-purple-ink-deep); font-weight: var(--cs-fw-semibold); text-decoration: underline; }
.tpilot__brand { display: inline-flex; align-items: center; gap: 4px; font-weight: var(--cs-fw-bold); color: var(--cs-purple-ink-deep); }
.tpilot__brand svg { width: 15px; height: 15px; }
.tpilot { position: relative; z-index: 6; }
.tpilot__tip { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-4px);
  width: max-content; max-width: 280px; background: #6a5b95; color: #fff; font-size: 12.5px;
  font-weight: var(--cs-fw-medium); line-height: 1.4; text-align: center; padding: 9px 13px; border-radius: 10px;
  box-shadow: 0 10px 30px rgb(62 53 91 / 22%); opacity: 0; pointer-events: none; transition: opacity .18s var(--cs-ease), transform .18s var(--cs-ease); z-index: 5; }
.tpilot__tip::after { content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-bottom-color: #6a5b95; }
.tpilot:hover .tpilot__tip, .tpilot:focus-visible .tpilot__tip { opacity: 1; }

/* secondary / ghost button (extends DS button) */
.cs-btn--ghost { background: var(--cs-bg) !important; color: var(--cs-purple-ink); box-shadow: inset 0 0 0 1.5px rgb(62 53 91 / 15%); }
.cs-btn--ghost::before { background: none; }
.cs-btn--ghost:hover { box-shadow: inset 0 0 0 1.5px rgb(62 53 91 / 35%); }

/* hero A — stack collapse diagram */
.stackviz { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.stackviz__vendors { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 360px; }
.vchip { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-radius: 14px;
  background: var(--cs-bg); border: 1px solid rgb(62 53 91 / 10%); color: var(--cs-text-muted);
  font-size: 15px; font-weight: var(--cs-fw-medium); box-shadow: 0 2px 10px rgb(62 53 91 / 4%); }
.vchip .ic { width: 18px; height: 18px; color: var(--cs-text-subtle); }
.vchip s { color: var(--cs-text-subtle); opacity: .6; text-decoration-color: var(--cs-pink); }
.vchip--check { color: var(--cs-text-strong); font-weight: var(--cs-fw-semibold); }
.vchip--check .ic { width: 18px; height: 18px; color: var(--cs-green); }
.stackviz__arrow { color: var(--cs-purple); display: flex; align-items: center; justify-content: center; }
.stackviz__arrow .ic { width: 26px; height: 26px; }
.keycard { position: relative; width: 100%; max-width: 360px; border-radius: 22px; padding: 24px 26px;
  background: var(--cs-purple-ink); color: #fff; overflow: hidden; box-shadow: 0 24px 60px rgb(62 53 91 / 28%); }
.keycard::before { content: ""; position: absolute; inset: 0; background: var(--cs-gradient-button); opacity: .14; }
.keycard__row { position: relative; display: flex; align-items: center; gap: 14px; }
.keycard__mark { width: 44px; height: 44px; border-radius: 50%; background: var(--cs-gradient-icon); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.keycard__mark .ic { color: #fff; width: 22px; height: 22px; }
.keycard__t { font-family: var(--cs-font-display); font-weight: var(--cs-fw-semibold); font-size: 19px; }
.keycard__s { font-size: 13px; color: rgb(255 255 255 / 70%); margin-top: 2px; }
.keycard__key { position: relative; margin-top: 18px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px;
  color: rgb(255 255 255 / 88%); background: rgb(255 255 255 / 10%); border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 10px; padding: 11px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.keycard__cost { position: relative; margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.keycard__price { font-family: var(--cs-font-display); font-weight: var(--cs-fw-bold); font-size: 22px; color: #fff; }
.keycard__price small { font-family: var(--cs-font-body); font-weight: var(--cs-fw-regular); font-size: 12px; color: rgb(255 255 255 / 60%); margin-left: 4px; }
.keycard__save { display: inline-flex; align-items: center; gap: 6px; font-family: var(--cs-font-body); font-weight: var(--cs-fw-bold);
  font-size: 12px; color: #fff; background: var(--cs-gradient-button); border-radius: 999px; padding: 6px 12px; box-shadow: 0 6px 16px rgb(255 96 133 / 30%); }
.keycard__save .ic { width: 14px; height: 14px; }

/* hero B — coverage panel */
.coverage { position: relative; border-radius: 28px; padding: 34px; background: var(--cs-card-frost);
  border: 1px solid #fff; backdrop-filter: blur(20px); box-shadow: 0 30px 70px rgb(62 53 91 / 14%); }
.coverage__logos { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.coverage__logos img { width: 38px; height: 38px; border-radius: 50%; background: #fff; padding: 7px; box-shadow: 0 2px 8px rgb(62 53 91 / 8%); }
.coverage__logos .more { width: 38px; height: 38px; border-radius: 50%; background: var(--cs-surface-lilac); color: var(--cs-purple);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: var(--cs-fw-bold); }
.coverage__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.cov { }
.cov__n { font-family: var(--cs-font-display); font-weight: var(--cs-fw-bold); font-size: 34px; line-height: 1;
  background: var(--cs-gradient-heading); background-clip: text; -webkit-text-fill-color: transparent; }
.cov__l { margin-top: 6px; font-size: 14px; color: var(--cs-text-muted); }

/* ---------------- stat strip ---------------- */
.stats { border-top: 1px solid rgb(62 53 91 / 8%); border-bottom: 1px solid rgb(62 53 91 / 8%); }
.stats .wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 30px 16px; text-align: center; border-left: 1px solid rgb(62 53 91 / 8%); }
.stat:first-child { border-left: 0; }
.stat__n { font-family: var(--cs-font-display); font-weight: var(--cs-fw-bold); font-size: 30px; color: var(--cs-purple-ink-deep); }
.stat__l { margin-top: 4px; font-size: 14px; color: var(--cs-text-muted); }
@media (max-width: 720px) { .stats .wrap { grid-template-columns: 1fr 1fr; } .stat:nth-child(3) { border-left: 0; } }

/* ---------------- generic section ---------------- */
.sec { padding: 104px 0; }
.sec--lilac { background: var(--cs-surface-lilac); }
.sec--bluewhite { background: var(--cs-surface-bluewhite); }
.sec__head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.sec__head .cs-badge { margin-bottom: 20px; }
.sec__title { font-family: var(--cs-font-display); font-weight: var(--cs-fw-bold); color: var(--cs-purple-ink-deep);
  font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; }
.sec__title b { background: var(--cs-gradient-heading); background-clip: text; -webkit-text-fill-color: transparent; }
.sec__sub { margin: 18px auto 0; font-size: 18px; line-height: 1.55; color: var(--cs-text); max-width: 60ch; }

/* ---------------- one key replaces your stack ---------------- */
.replace .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
@media (max-width: 920px) { .replace .wrap { grid-template-columns: 1fr; gap: 40px; } }
.replace__title { font-family: var(--cs-font-display); font-weight: var(--cs-fw-bold); color: var(--cs-purple-ink-deep);
  font-size: clamp(28px, 3.4vw, 42px); line-height: 1.12; letter-spacing: -0.01em; }
.replace__title b { background: var(--cs-gradient-heading); background-clip: text; -webkit-text-fill-color: transparent; }
.replace__body { margin-top: 18px; font-size: 18px; line-height: 1.6; color: var(--cs-text); }
.replace__list { margin: 24px 0 0; display: flex; flex-direction: column; gap: 12px; }
.replace__list li { display: flex; align-items: center; gap: 12px; font-size: 16px; color: var(--cs-text-strong); }
.replace__list .ic { width: 20px; height: 20px; color: var(--cs-green); flex-shrink: 0; }

/* ---------------- card grid (what you get) ---------------- */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 920px) { .grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .grid { grid-template-columns: 1fr; } }
.gcard { background: var(--cs-bg); border-radius: 22px; padding: 28px; border: 1px solid rgb(62 53 91 / 7%);
  box-shadow: 0 4px 20px rgb(62 53 91 / 4%); transition: transform .2s var(--cs-ease), box-shadow .2s var(--cs-ease); }
.gcard:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgb(62 53 91 / 10%); }
.gcard__ic { width: 48px; height: 48px; border-radius: 14px; background: var(--cs-surface-lilac);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.gcard__ic .ic { width: 24px; height: 24px; color: var(--cs-purple); }
.gcard--hot .gcard__ic { background: var(--cs-gradient-icon); }
.gcard--hot .gcard__ic .ic { color: #fff; }
.gcard__t { font-family: var(--cs-font-display); font-weight: var(--cs-fw-semibold); font-size: 20px; color: var(--cs-purple-ink-deep); }
.gcard__d { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--cs-text); }

/* ---------------- feature sections (Wallet / DeFi / Market Data) ---------------- */
.feature .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
@media (max-width: 920px) { .feature .wrap { grid-template-columns: 1fr; gap: 44px; } }
.feature--rev .feature__viz { order: -1; }
@media (max-width: 920px) { .feature--rev .feature__viz { order: 0; } }
.feature__eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.feature__eyebrow .ic { width: 18px; height: 18px; color: var(--cs-purple); }
.feature__eyebrow span { font-family: var(--cs-font-body); font-weight: var(--cs-fw-semibold); font-size: 13px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--cs-purple); }
.feature__title { font-family: var(--cs-font-display); font-weight: var(--cs-fw-bold); color: var(--cs-purple-ink-deep);
  font-size: clamp(28px, 3.4vw, 42px); line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; }
.feature__title b { background: var(--cs-gradient-heading); background-clip: text; -webkit-text-fill-color: transparent; }
.feature__body { margin-top: 18px; font-size: 18px; line-height: 1.6; color: var(--cs-text); }
.feature__list { margin: 22px 0 0; display: flex; flex-direction: column; gap: 11px; }
.feature__list li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; color: var(--cs-text-strong); line-height: 1.4; }
.feature__list .ic { width: 20px; height: 20px; color: var(--cs-green); flex-shrink: 0; margin-top: 1px; }
.feature__viz { display: flex; justify-content: center; }

/* data-card visual */
.datacard { width: 100%; max-width: 460px; background: var(--cs-bg); border-radius: 24px; padding: 24px;
  border: 1px solid rgb(62 53 91 / 8%); box-shadow: var(--cs-shadow-card); }
.dc__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.dc__addr { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; color: var(--cs-text-muted);
  background: var(--cs-surface-lilac); border-radius: 999px; padding: 6px 12px; display: inline-flex; align-items: center; gap: 8px; }
.dc__addr .ic { width: 14px; height: 14px; color: var(--cs-purple); }
.dc__chains { display: flex; align-items: center; }
.dc__chains img { width: 22px; height: 22px; border-radius: 50%; background: #fff; margin-left: -6px; box-shadow: 0 0 0 2px #fff; }
.dc__label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--cs-text-subtle); font-weight: var(--cs-fw-semibold); }
.dc__balance { font-family: var(--cs-font-display); font-weight: var(--cs-fw-bold); font-size: 34px; color: var(--cs-purple-ink-deep); margin: 2px 0 16px; }
.dc__rows { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid rgb(62 53 91 / 7%); }
.row__logo { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; background: var(--cs-surface-lilac); }
.row__chip { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--cs-font-display); font-weight: var(--cs-fw-bold); font-size: 14px; color: #fff; }
.row__main { flex: 1 1 auto; min-width: 0; }
.row__name { font-family: var(--cs-font-display); font-weight: var(--cs-fw-semibold); font-size: 15px; color: var(--cs-purple-ink-deep); }
.row__sub { font-size: 12.5px; color: var(--cs-text-muted); margin-top: 1px; }
.row__right { text-align: right; }
.row__val { font-family: var(--cs-font-display); font-weight: var(--cs-fw-semibold); font-size: 15px; color: var(--cs-purple-ink-deep); }
.row__chg { font-size: 12.5px; margin-top: 1px; font-weight: var(--cs-fw-medium); }
.up { color: var(--cs-green); } .down { color: var(--cs-red); }
.dc__spark { margin: 4px 0 8px; }
.dc__spark svg { width: 100%; height: 56px; display: block; }
.dc__price { display: flex; align-items: baseline; gap: 10px; }
.dc__price .p { font-family: var(--cs-font-display); font-weight: var(--cs-fw-bold); font-size: 30px; color: var(--cs-purple-ink-deep); }
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: var(--cs-fw-semibold);
  color: var(--cs-purple); background: var(--cs-surface-lilac); border-radius: 999px; padding: 4px 10px; }

/* ---------------- comparison table ---------------- */
.cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 22px 0 8px; }
.cmp-scroll::-webkit-scrollbar { height: 8px; }
.cmp-scroll::-webkit-scrollbar-thumb { background: rgb(62 53 91 / 15%); border-radius: 999px; }
.cmp { display: flex; align-items: flex-start; min-width: 840px; max-width: 1040px; margin: 0 auto; }
.cmp__col { flex: 1 1 0; }
.cmp__labels { flex: 1.7 1 0; position: sticky; left: 0; z-index: 3; background: var(--cs-bg); }
.cmp__cell { height: 64px; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-top: 1px solid rgb(62 53 91 / 8%); font-size: 14px; line-height: 1.3; text-align: center; color: var(--cs-text-muted); }
.cmp__labels .cmp__cell { justify-content: flex-start; text-align: left; font-weight: var(--cs-fw-semibold); color: var(--cs-purple-ink-deep); font-family: var(--cs-font-display); }
.cmp__head { height: 84px; border-top: 0; font-family: var(--cs-font-display); font-weight: var(--cs-fw-bold);
  font-size: 17px; color: var(--cs-purple-ink-deep); flex-direction: column; gap: 2px; }
.cmp__head small { font-family: var(--cs-font-body); font-weight: var(--cs-fw-medium); font-size: 12px; color: var(--cs-text-subtle); }
.cmp .ic { width: 19px; height: 19px; }
.cmp .yes { color: var(--cs-green); }
.cmp .no { color: var(--cs-gray-20); }
.cmp__txt-strong { color: var(--cs-purple-ink-deep); font-weight: var(--cs-fw-semibold); }

/* highlighted CoinStats column */
.cmp__col--hl { position: relative; background: var(--cs-bg);
  border: 1px solid rgb(255 147 50 / 30%); border-radius: 20px; box-shadow: 0 26px 60px rgb(62 53 91 / 16%); }
.cmp__col--hl::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; border-radius: 20px 20px 0 0; background: var(--cs-gradient-percent); }
.cmp__col--hl .cmp__head { padding-top: 22px; }
.cmp__col--hl .cmp__cell { background: rgb(255 147 50 / 4%); }
.cmp__col--hl .cmp__cell:not(.cmp__head) { color: var(--cs-text); }
.cmp__col--hl .cmp__txt-strong { color: var(--cs-purple-ink-deep); }
.cmp__ribbon { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-family: var(--cs-font-body); font-weight: var(--cs-fw-bold); font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: var(--cs-gradient-button); border-radius: 999px; padding: 5px 14px; box-shadow: 0 6px 16px rgb(255 96 133 / 35%); }

.cmp__note { max-width: 1040px; margin: 18px auto 0; font-size: 13px; color: var(--cs-text-subtle); text-align: center; }
.cmp__callout { max-width: 760px; margin: 30px auto 0; text-align: center; font-family: var(--cs-font-display);
  font-weight: var(--cs-fw-semibold); font-size: clamp(18px, 2.2vw, 24px); line-height: 1.35; color: var(--cs-purple-ink-deep); }
.cmp__callout b { background: var(--cs-gradient-heading); background-clip: text; -webkit-text-fill-color: transparent; }

/* ---------------- use cases ---------------- */
.uses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 920px) { .uses { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .uses { grid-template-columns: 1fr; } }
.ucard { display: flex; gap: 16px; align-items: flex-start; padding: 24px; border-radius: 20px; background: var(--cs-bg);
  border: 1px solid rgb(62 53 91 / 7%); }
.ucard__ic { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; background: var(--cs-surface-lilac);
  display: flex; align-items: center; justify-content: center; }
.ucard__ic .ic { width: 21px; height: 21px; color: var(--cs-purple-ink); }
.ucard__t { font-family: var(--cs-font-display); font-weight: var(--cs-fw-semibold); font-size: 17px; color: var(--cs-purple-ink-deep); }
.ucard__d { margin-top: 5px; font-size: 14px; line-height: 1.5; color: var(--cs-text-muted); }

/* ---------------- MCP block (dark) ---------------- */
.mcp { background: var(--cs-purple-ink); position: relative; overflow: hidden; }
.mcp::before { content: ""; position: absolute; width: 900px; height: 500px; border-radius: 50%; filter: blur(90px);
  background: var(--cs-magenta); opacity: .16; top: -180px; right: -120px; }
.mcp .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 920px) { .mcp .wrap { grid-template-columns: 1fr; gap: 36px; } }
.mcp__title { font-family: var(--cs-font-display); font-weight: var(--cs-fw-bold); color: #fff;
  font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -0.01em; }
.mcp__title b { background: var(--cs-gradient-heading-warm); background-clip: text; -webkit-text-fill-color: transparent; }
.mcp__body { margin-top: 18px; font-size: 18px; line-height: 1.6; color: rgb(255 255 255 / 78%); }
.mcp__clients { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; }
.mcp__clients span { font-size: 13px; font-weight: var(--cs-fw-medium); color: rgb(255 255 255 / 85%);
  background: rgb(255 255 255 / 10%); border: 1px solid rgb(255 255 255 / 14%); border-radius: 999px; padding: 7px 15px; }
.mcp__panel { background: rgb(255 255 255 / 6%); border: 1px solid rgb(255 255 255 / 12%); border-radius: 20px; padding: 24px; }
.mcp__label { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: rgb(255 255 255 / 50%); font-weight: var(--cs-fw-semibold); }
.mcp__url { margin-top: 12px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 15px; color: #fff;
  background: rgb(0 0 0 / 30%); border-radius: 12px; padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.mcp__url .ic { width: 18px; height: 18px; color: rgb(255 255 255 / 60%); cursor: pointer; }
.mcp__steps { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.mcp__steps li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: rgb(255 255 255 / 80%); line-height: 1.45; }
.mcp__steps .n { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: rgb(255 255 255 / 14%);
  color: #fff; font-size: 12px; font-weight: var(--cs-fw-bold); display: flex; align-items: center; justify-content: center; }

/* ---------------- CTA band ---------------- */
.cta { text-align: center; position: relative; overflow: hidden; }
.cta__glow { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .16; z-index: 0; }
.cta__title { position: relative; z-index: 1; font-family: var(--cs-font-display); font-weight: var(--cs-fw-bold);
  color: var(--cs-purple-ink-deep); font-size: clamp(32px, 4vw, 52px); line-height: 1.08; letter-spacing: -0.015em; }
.cta__sub { position: relative; z-index: 1; margin: 18px auto 30px; font-size: 18px; color: var(--cs-text); max-width: 50ch; }
.cta__row { position: relative; z-index: 1; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------------- footer ---------------- */
.ftr { background: var(--cs-purple-ink-deep); color: rgb(255 255 255 / 70%); padding: 56px 0 40px; }
.ftr .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 720px) { .ftr .wrap { grid-template-columns: 1fr 1fr; gap: 28px; } }
.ftr__brand img { height: 24px; filter: brightness(0) invert(1); opacity: .92; }
.ftr__brand p { margin-top: 14px; font-size: 14px; line-height: 1.55; color: rgb(255 255 255 / 55%); max-width: 30ch; }
.ftr__col h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: rgb(255 255 255 / 45%); font-weight: var(--cs-fw-semibold); margin-bottom: 14px; }
.ftr__col a { display: block; font-size: 15px; color: rgb(255 255 255 / 78%); padding: 5px 0; transition: color .15s; }
.ftr__col a:hover { color: #fff; }
.ftr__bar { border-top: 1px solid rgb(255 255 255 / 10%); margin-top: 40px; padding-top: 22px; font-size: 13px; color: rgb(255 255 255 / 45%); }

/* ---------------- hero direction toggle (chrome) ---------------- */
.htoggle { position: fixed; z-index: 1000; right: 20px; bottom: 20px; display: flex; align-items: center; gap: 6px;
  background: rgb(28 24 38 / 88%); backdrop-filter: blur(12px); border-radius: 999px; padding: 6px; box-shadow: 0 12px 30px rgb(0 0 0 / 28%); }
.htoggle span { color: rgb(255 255 255 / 55%); font-size: 12px; font-weight: 600; padding: 0 6px 0 12px; }
.htoggle button { border: 0; cursor: pointer; border-radius: 999px; font-family: var(--cs-font-body); font-weight: 700; font-size: 12px;
  padding: 8px 14px; color: rgb(255 255 255 / 70%); background: transparent; }
.htoggle button.active { background: var(--cs-gradient-button); color: #fff; }

body[data-hero="A"] .hero--b { display: none; }
body[data-hero="B"] .hero--a { display: none; }

/* ============================================================
   Centered "Ship 10x Faster with Wallet Data" (affiliate logic)
   ============================================================ */
.wben__head { text-align: center; max-width: 880px; margin: 0 auto 56px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.wben__title { font-family: var(--cs-font-display); font-weight: var(--cs-fw-bold); color: var(--cs-purple-ink-deep);
  font-size: clamp(30px, 4.2vw, 52px); line-height: 1.07; letter-spacing: -0.02em; max-width: 17ch; }
.wben__title b { background: var(--cs-gradient-heading); background-clip: text; -webkit-text-fill-color: transparent; }
.wben__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 940px) { .wben__grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; } }
.wbcard { position: relative; overflow: hidden; border-radius: 36px; padding: 34px 30px 30px; background: var(--cs-purple-ink);
  min-height: 470px; display: flex; flex-direction: column; box-shadow: 0 24px 60px rgb(62 53 91 / 18%); }
.wbcard::before { content: ""; position: absolute; width: 620px; height: 320px; left: 50%; bottom: -34%; transform: translateX(-50%); z-index: 0; pointer-events: none; }
.wbcard--o::before { background: radial-gradient(50% 50% at 50% 50%, rgb(255 147 50 / 60%) 0%, rgb(255 147 50 / 0%) 72%); }
.wbcard--p::before { background: radial-gradient(50% 50% at 50% 50%, rgb(255 96 133 / 60%) 0%, rgb(255 96 133 / 0%) 72%); }
.wbcard--m::before { background: radial-gradient(50% 50% at 50% 50%, rgb(229 72 255 / 55%) 0%, rgb(229 72 255 / 0%) 72%); }
.wbcard__top { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.wbcard__name { font-family: var(--cs-font-display); font-weight: var(--cs-fw-semibold); font-size: 26px; line-height: 1.12; color: #fff; }
.wbcard__badge { width: 48px; height: 48px; border-radius: 50%; background: var(--cs-gradient-icon); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wbcard__badge .ic { width: 24px; height: 24px; color: #fff; }

/* white app-style mock panel (shared by cards + demo) */
.wm { position: relative; z-index: 1; margin-top: auto; background: #fff; border-radius: 18px; padding: 16px; color: #1a1430;
  font-family: var(--cs-font-body); box-shadow: 0 -2px 34px rgb(0 0 0 / 18%); }
.wm__hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wm__wallet { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: var(--cs-fw-semibold); color: #1a1430; background: #f3f1f9; border-radius: 999px; padding: 5px 10px; }
.wm__wallet .ic { width: 13px; height: 13px; color: #8a8499; }
.wm__dots { display: flex; align-items: center; }
.wm__dots img { width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #fff; margin-left: -7px; }
.wm__dots img:first-child { margin-left: 0; }
.wm__dots .more { margin-left: -7px; width: 22px; height: 22px; border-radius: 50%; background: #ece8f6; color: #6b6480; font-size: 10px; font-weight: var(--cs-fw-bold); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px #fff; }
.wm__total { font-family: var(--cs-font-display); font-weight: var(--cs-fw-bold); font-size: 28px; color: #1a1430; margin-top: 12px; line-height: 1; }
.wm__chg { font-size: 12.5px; font-weight: var(--cs-fw-semibold); color: var(--cs-green); margin-top: 6px; }
.wm__label { font-size: 13px; font-weight: var(--cs-fw-semibold); color: #1a1430; }
.wm__rows { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.wm__row { display: flex; align-items: center; gap: 10px; }
.wm__ava { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; }
.wm__ico { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.wm__ico .ic { width: 15px; height: 15px; color: #fff; }
.wm__id { min-width: 0; }
.wm__sym { font-weight: var(--cs-fw-semibold); font-size: 13.5px; color: #1a1430; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm__sub { font-size: 11.5px; color: #8a8499; margin-top: 1px; }
.wm__val { margin-left: auto; text-align: right; }
.wm__usd { font-weight: var(--cs-fw-semibold); font-size: 13.5px; color: #1a1430; }
.wm__usd.pos { color: var(--cs-green); }
.wm__qty { font-size: 11.5px; color: #8a8499; margin-top: 1px; }
.wm__bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; margin-top: 14px; }
.wm__bar i { display: block; height: 100%; }

/* ============================================================
   Live demo — "Watch one API call become an app"
   (dark code console on the light page)
   ============================================================ */
.lvdemo { position: relative; overflow: hidden; }
.lvdemo .sec__head { margin-bottom: 40px; }
.lvconsole { position: relative; z-index: 1; max-width: 1000px; margin: 0 auto;
  background: linear-gradient(180deg, #2a2240, #221b33); border: 1px solid rgb(255 255 255 / 10%); border-radius: 24px;
  overflow: hidden; box-shadow: 0 40px 90px rgb(62 53 91 / 26%); --mono: ui-monospace, "SF Mono", Menlo, monospace; }
.lvbar { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid rgb(255 255 255 / 10%); background: rgb(0 0 0 / 20%); }
.lvbar .d { width: 11px; height: 11px; border-radius: 50%; }
.lvbar .r{background:#ff5f57}.lvbar .y{background:#febc2e}.lvbar .gr{background:#28c840}
.lvbar .ttl { margin-left: 8px; font-family: var(--mono); font-size: 12.5px; color: rgb(255 255 255 / 50%); }
.lvbar .lat { margin-left: auto; font-family: var(--mono); font-size: 12px; color: rgb(255 255 255 / 50%); opacity: 0; transition: opacity .3s; }
.lvbar .lat.show { opacity: 1; } .lvbar .lat b { color: var(--cs-green); }
.lvreq { padding: 18px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid rgb(255 255 255 / 10%); }
.lvmethod { font-family: var(--mono); font-weight: 700; font-size: 12px; color: #6ccf59; background: rgb(108 207 89 / 12%); border: 1px solid rgb(108 207 89 / 30%); border-radius: 8px; padding: 6px 10px; }
.lvurl { flex: 1 1 320px; min-width: 0; font-family: var(--mono); font-size: 13px; color: rgb(255 255 255 / 70%); background: rgb(0 0 0 / 30%); border: 1px solid rgb(255 255 255 / 10%); border-radius: 10px; padding: 11px 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lvurl .addr { color: #fff; background: rgb(147 93 235 / 30%); border-radius: 5px; padding: 1px 5px; }
.lvsend { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border: 0; color: #fff; font-family: var(--cs-font-display); font-weight: var(--cs-fw-semibold); font-size: 15px; border-radius: 999px; padding: 11px 22px; background: var(--cs-gradient-button); box-shadow: 0 10px 26px rgb(255 96 133 / 30%); transition: transform .15s, opacity .15s; }
.lvsend:hover { transform: translateY(-1px); } .lvsend:disabled { opacity: .6; cursor: default; transform: none; }
.lvsend .ic { width: 16px; height: 16px; }
.lvspin { width: 15px; height: 15px; border: 2px solid rgb(255 255 255 / 40%); border-top-color: #fff; border-radius: 50%; animation: lvsp .7s linear infinite; }
@keyframes lvsp { to { transform: rotate(360deg); } }
.lvchips { padding: 14px 18px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-bottom: 1px solid rgb(255 255 255 / 10%); }
.lvchips > span { font-size: 12px; color: rgb(255 255 255 / 50%); margin-right: 2px; }
.lvchip { cursor: pointer; border: 1px solid rgb(255 255 255 / 10%); background: rgb(255 255 255 / 5%); color: rgb(255 255 255 / 70%); font-family: var(--mono); font-size: 12.5px; border-radius: 999px; padding: 8px 14px; transition: all .15s; display: inline-flex; align-items: center; gap: 7px; }
.lvchip:hover { background: rgb(255 255 255 / 10%); color: #fff; }
.lvchip.active { background: var(--cs-gradient-button); color: #fff; border-color: transparent; }
.lvchip i { width: 7px; height: 7px; border-radius: 50%; background: var(--cs-pink); }
.lvbody { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) { .lvbody { grid-template-columns: 1fr; } }
.lvresp { padding: 22px; border-right: 1px solid rgb(255 255 255 / 10%); font-family: var(--mono); font-size: 12.5px; line-height: 1.85; color: rgb(255 255 255 / 70%); overflow: hidden; }
@media (max-width: 760px) { .lvresp { border-right: 0; border-bottom: 1px solid rgb(255 255 255 / 10%); } }
.lvresp .k{color:#8ab4ff}.lvresp .s{color:#ffb37a}.lvresp .n{color:#6ccf59}.lvresp .p{color:rgb(255 255 255 / 45%)}
.lvresp .ln { opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .25s; }
.lvresp.run .ln { opacity: 1; transform: none; }
.lvstage { padding: 22px; display: flex; align-items: center; justify-content: center; }
.lvcard { width: 100%; max-width: 330px; opacity: 0; transform: scale(.96); transition: opacity .4s var(--cs-ease), transform .4s var(--cs-ease); }
.lvcard.show { opacity: 1; transform: none; }
.lvcard .wm { margin-top: 0; box-shadow: 0 20px 50px rgb(0 0 0 / 30%); }
.lvcard .wm__row { opacity: 0; transform: translateX(8px); transition: opacity .3s, transform .3s; }
.lvcard.show .wm__row { opacity: 1; transform: none; }
.lvfoot { position: relative; z-index: 1; text-align: center; margin-top: 20px; font-size: 13px; color: var(--cs-text-subtle); }

/* ============================================================
   Hero hub diagram (CoinStats API → capabilities)
   ============================================================ */
.hubviz { position: relative; width: 100%; max-width: 624px; margin: -10px auto 0; aspect-ratio: 576 / 548; }
.hubviz__svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.hubnode, .hubcard, .hubcheap { position: absolute; transform: translate(-50%, -50%); z-index: 1; }
.hubnode { left: 50%; top: 9.5%; display: flex; align-items: center; gap: 12px; background: #f3eefc;
  border-radius: 22px; padding: 16px 22px; box-shadow: 0 10px 30px rgb(62 53 91 / 12%), 0 2px 6px rgb(62 53 91 / 6%); white-space: nowrap; }
.hubnode { background: radial-gradient(120% 130% at 50% 50%, #f5e4f5 0%, #fdf7fd 38%, #ffffff 70%); }
.hubnode__logo { width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; overflow: hidden; display: flex; align-items: center; }
.hubnode__logo img { height: 30px; width: auto; max-width: none; display: block; object-position: left center; }
.hubnode__t { font-family: var(--cs-font-display); font-weight: var(--cs-fw-bold); font-size: 19px; color: var(--cs-purple-ink); }
.hubcard { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 18px; padding: 13px 18px;
  width: 158px; box-sizing: border-box;
  box-shadow: 0 8px 22px rgb(62 53 91 / 10%); white-space: nowrap; }
.hubcard__ic { width: 42px; height: 42px; 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; }
.hubcard__ic .ic { width: 22px; height: 22px; background: var(--cs-gradient-icon); }
.hubcard__t { font-family: var(--cs-font-display); font-weight: var(--cs-fw-semibold); font-size: 15.5px; line-height: 1.15; color: var(--cs-purple-ink); }
.hub-market { left: 17%; top: 40%; }
.hub-wallets { left: 50%; top: 40%; }
.hub-defi { left: 83%; top: 40%; }
.hub-portfolio { left: 31%; top: 60%; }
.hub-security { left: 69%; top: 60%; }
.hubcheap { left: 50%; top: 73%; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.hubcheap__ic { width: 20px; height: 20px; background: var(--cs-purple-ink); flex-shrink: 0;
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.hubcheap__t { font-family: var(--cs-font-display); font-weight: var(--cs-fw-bold); font-size: 18px; white-space: nowrap;
  color: var(--cs-purple-ink); }
.hubcheap { cursor: pointer; transition: opacity .15s ease; }
.hubcheap:hover { opacity: 0.65; }
@media (max-width: 420px) { .hubcard { padding: 10px 12px; } .hubcard__t { font-size: 13px; } .hubcard__ic { width: 34px; height: 34px; } .hubnode { padding: 12px 16px; } .hubnode__t { font-size: 16px; } }

/* hub animation — data flowing from API node to capabilities */
.hubpackets { opacity: 0; animation: hubpktshow 0.4s linear 2s forwards; }
@keyframes hubpktshow { to { opacity: 1; } }
.hub-market   { --spark: var(--cs-orange); }
.hub-wallets  { --spark: var(--cs-pink); }
.hub-defi     { --spark: var(--cs-magenta); }
.hub-portfolio{ --spark: var(--cs-pink); }
.hub-security { --spark: var(--cs-magenta); }
@media (prefers-reduced-motion: no-preference) {
  .hubflow path { animation: hubdash 0.9s linear infinite; }
  .hubnode { animation: hubpulse 1.6s var(--cs-ease) infinite; }
  /* hubbreath glow BEGINS the instant each packet reaches its box (delay = packet arrival = begin + travel) */
  .hub-market    { animation: hubbreath 2s   var(--cs-ease) 2s   infinite; }
  .hub-wallets   { animation: hubbreath 2s   var(--cs-ease) 2.4s infinite; }
  .hub-defi      { animation: hubbreath 2s   var(--cs-ease) 2.8s infinite; }
  .hub-portfolio { animation: hubbreath 2.4s var(--cs-ease) 3.5s infinite; }
  .hub-security  { animation: hubbreath 2.4s var(--cs-ease) 3.9s infinite; }
}
@keyframes hubdash { to { stroke-dashoffset: -18; } }
@keyframes hubpulse {
  0%, 100% { box-shadow: 0 10px 30px rgb(62 53 91 / 12%), 0 2px 6px rgb(62 53 91 / 6%); }
  50% { box-shadow: 0 10px 34px rgb(255 96 133 / 26%), 0 0 0 6px rgb(255 96 133 / 6%); }
}
/* original pulse look, but fired at the instant the packet lands (~end of cycle) */
@keyframes hubspark {
  0%, 84%, 100% { box-shadow: 0 8px 22px rgb(62 53 91 / 10%); }
  95% { box-shadow: 0 10px 34px rgb(255 96 133 / 26%), 0 0 0 6px rgb(255 96 133 / 6%); }
}
@media (prefers-reduced-motion: reduce) { .hubpackets { display: none; } }
/* hubbreath: calm at the start (packet-landing instant), eases into the glow, settles before the next packet */
@keyframes hubbreath {
  0%, 100% { box-shadow: 0 8px 22px rgb(62 53 91 / 10%); }
  45% { box-shadow: 0 10px 34px rgb(255 96 133 / 26%), 0 0 0 6px rgb(255 96 133 / 6%); }
}