/* ============================================================
   Trade Challenge — middle sections, "Frosted Arena" system.
   Restrained, premium, Apple-style glassmorphism on a single
   brand-blue accent. Built on DS tokens (--tc-*).
   ============================================================ */

:root {
  --acc: #4d97ff;            /* the one theme color */
  --acc-bright: #7cb6ff;
  --acc-soft: rgba(77, 151, 255, .14);
  --acc-line: rgba(77, 151, 255, .35);
  --glass: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.022));
  --glass-2: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  --gl-border: rgba(255,255,255,.10);
  --gl-border-hi: rgba(255,255,255,.18);
  --ink: #f4f7ff;
  --ink-2: rgba(225,234,250,.62);
  --ink-3: rgba(190,205,235,.40);
}

/* ---- viewport scrollbar: match custom dropdown menus ---- */
html {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--tc-cyan) 38%, var(--tc-border)) transparent;
}
html::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
html::-webkit-scrollbar-button,
html::-webkit-scrollbar-button:single-button,
html::-webkit-scrollbar-button:double-button,
html::-webkit-scrollbar-button:vertical,
html::-webkit-scrollbar-button:horizontal,
html::-webkit-scrollbar-button:start,
html::-webkit-scrollbar-button:end,
html::-webkit-scrollbar-button:decrement,
html::-webkit-scrollbar-button:increment,
html::-webkit-scrollbar-button:vertical:decrement,
html::-webkit-scrollbar-button:vertical:increment,
html::-webkit-scrollbar-button:vertical:start,
html::-webkit-scrollbar-button:vertical:end,
html::-webkit-scrollbar-button:vertical:start:decrement,
html::-webkit-scrollbar-button:vertical:end:increment,
html::-webkit-scrollbar-button:horizontal:start,
html::-webkit-scrollbar-button:horizontal:end,
html::-webkit-scrollbar-button:horizontal:start:decrement,
html::-webkit-scrollbar-button:horizontal:end:increment,
body::-webkit-scrollbar-button,
body::-webkit-scrollbar-button:single-button,
body::-webkit-scrollbar-button:double-button,
body::-webkit-scrollbar-button:vertical,
body::-webkit-scrollbar-button:horizontal,
body::-webkit-scrollbar-button:start,
body::-webkit-scrollbar-button:end,
body::-webkit-scrollbar-button:decrement,
body::-webkit-scrollbar-button:increment,
body::-webkit-scrollbar-button:vertical:decrement,
body::-webkit-scrollbar-button:vertical:increment,
body::-webkit-scrollbar-button:vertical:start,
body::-webkit-scrollbar-button:vertical:end,
body::-webkit-scrollbar-button:vertical:start:decrement,
body::-webkit-scrollbar-button:vertical:end:increment,
body::-webkit-scrollbar-button:horizontal:start,
body::-webkit-scrollbar-button:horizontal:end,
body::-webkit-scrollbar-button:horizontal:start:decrement,
body::-webkit-scrollbar-button:horizontal:end:increment,
*::-webkit-scrollbar-button,
*::-webkit-scrollbar-button:single-button,
*::-webkit-scrollbar-button:double-button,
*::-webkit-scrollbar-button:vertical,
*::-webkit-scrollbar-button:horizontal,
*::-webkit-scrollbar-button:start,
*::-webkit-scrollbar-button:end,
*::-webkit-scrollbar-button:decrement,
*::-webkit-scrollbar-button:increment,
*::-webkit-scrollbar-button:vertical:decrement,
*::-webkit-scrollbar-button:vertical:increment,
*::-webkit-scrollbar-button:vertical:start,
*::-webkit-scrollbar-button:vertical:end,
*::-webkit-scrollbar-button:vertical:start:decrement,
*::-webkit-scrollbar-button:vertical:end:increment,
*::-webkit-scrollbar-button:horizontal:start,
*::-webkit-scrollbar-button:horizontal:end,
*::-webkit-scrollbar-button:horizontal:start:decrement,
*::-webkit-scrollbar-button:horizontal:end:increment {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: transparent !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

html::-webkit-scrollbar-track {
  background: transparent;
}
html::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: var(--tc-radius-pill);
  background: color-mix(in srgb, var(--tc-cyan) 38%, var(--tc-border));
  background-clip: padding-box;
}
html::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--tc-cyan) 64%, var(--tc-border-bright));
  background-clip: padding-box;
}

/* ---- ambient light so the glass has something to refract ---- */
.tcm-ambient { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.tcm-ambient::before, .tcm-ambient::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(120px); opacity: .5;
}
.tcm-ambient::before { width: 680px; height: 680px; top: 4%; left: -8%; background: radial-gradient(circle, rgba(60,120,255,.20), transparent 70%); }
.tcm-ambient::after  { width: 760px; height: 760px; bottom: 6%; right: -10%; background: radial-gradient(circle, rgba(80,110,255,.16), transparent 70%); }

/* ---- frosted glass surfaces ---- */
.tcm-glass {
  position: relative; border-radius: 26px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(26px) saturate(150%); backdrop-filter: blur(26px) saturate(150%);
  border: 1px solid var(--gl-border);
  box-shadow: 0 24px 70px rgba(0,6,26,.5), inset 0 1px 0 rgba(255,255,255,.12);
}
.tcm-glass-2 {
  border-radius: 18px; background: var(--glass-2);
  border: 1px solid rgba(255,255,255,.07);
}

/* ---- scroll reveal ---- */
.tcm-reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--tc-ease), transform .8s var(--tc-ease); }
.tcm-reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .tcm-reveal { opacity: 1 !important; transform: none !important; transition: none; } }

/* ---- section header ---- */
.tcm-eyebrow { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 20px; }
.tcm-eyebrow span { font-family: var(--tc-font-head); font-weight: 600; font-size: 12px; letter-spacing: 4px; text-transform: uppercase; color: var(--acc); }
.tcm-eyebrow i { width: 26px; height: 2px; border-radius: 2px; background: var(--acc); opacity: .8; }

/* ---- icon medallion ---- */
.tcm-ic { display: grid; place-items: center; border-radius: 50%; color: var(--ink); background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08); flex: 0 0 auto; transition: all .3s var(--tc-ease); }
.tcm-ic.acc { color: var(--acc-bright); background: var(--acc-soft); border-color: var(--acc-line); }

/* ---- entry checklist: hero icon cards ---- */
.entry-grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.entry-c { position: relative; display: flex; flex-direction: row; align-items: flex-start; text-align: left; gap: 18px;
  padding: 24px 26px; border-radius: 20px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  border: 1px solid rgba(255,255,255,.08);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s; }
.entry-c::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(42% 78% at 14% 42%, var(--ec-glow), transparent 70%); opacity: .24; transition: opacity .3s; }
.entry-c:hover { transform: translateY(-5px); border-color: var(--ec-line); box-shadow: 0 26px 64px rgba(0,6,24,.42); }
.entry-c:hover::before { opacity: .48; }
.entry-img { position: relative; width: auto; min-width: 48px; height: 48px; margin: 2px 0 0; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  animation: ecbob 5s ease-in-out infinite; }
.entry-img img { width: auto; height: 48px; max-width: 60px; object-fit: contain; opacity: .95; filter: saturate(.9) brightness(.97) drop-shadow(0 6px 14px var(--ec-glow)); }
.entry-tx { flex: 1 1 auto; min-width: 0; }
@keyframes ecbob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.entry-n { font-family: var(--tc-font-display); font-weight: 700; font-size: 11.5px; letter-spacing: 1.6px;
  color: var(--ec-c); padding: 4px 12px; border-radius: 999px; background: var(--ec-soft); border: 1px solid var(--ec-line); margin-bottom: 14px; }
.entry-t { font-family: var(--tc-font-head); font-weight: 600; font-size: 18px; color: var(--ink); margin: 0 0 10px; }
.entry-d { font-family: var(--tc-font-body); font-weight: 500; font-size: 13.5px; line-height: 1.62; color: var(--ink-2); margin: 0; text-wrap: pretty; }
@media (prefers-reduced-motion: reduce) { .entry-img { animation: none; } }
@media (max-width: 760px) { .entry-grid2 { grid-template-columns: 1fr; } }

/* ---- how to play: 3D emblem cards on a connecting rail ---- */
.tcm-stepflow { display: flex; align-items: stretch; gap: 0; }
.tcm-stepcard { position: relative; flex: 1; border-radius: 20px; padding: 26px 24px 24px; text-align: left; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.014));
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255,255,255,.08); transition: transform .35s var(--tc-ease), border-color .35s var(--tc-ease), box-shadow .35s var(--tc-ease);
  display: flex; flex-direction: column; align-items: flex-start; }
.tcm-stepcard:hover { transform: translateY(-5px); border-color: var(--acc-line); box-shadow: 0 24px 60px rgba(0,8,30,.5); }
/* numeral sits in its own corner (top-right) — never on top of the icon */
.tcm-stepbg { position: absolute; top: 14px; right: 20px; z-index: 0; pointer-events: none;
  font-family: var(--tc-font-display); font-weight: 800; font-size: 56px; line-height: 1; letter-spacing: -2px; color: rgba(198,216,255,.10); }
.tcm-stepcard h3, .tcm-stepcard p, .tcm-stepcard .tcm-howicon { position: relative; z-index: 1; }
.tcm-howarrow { flex: 0 0 auto; align-self: center; display: grid; place-items: center; width: 46px; color: var(--acc-bright); opacity: .9; }
.tcm-howarrow svg { filter: drop-shadow(0 0 8px rgba(77,151,255,.5)); }
/* micro-dynamics: arrows flow left→right, step emblems gently float */
@keyframes howArrowFlow { 0%,100% { opacity: .45; transform: translateX(0); } 50% { opacity: 1; transform: translateX(3px); } }
.tcm-howarrow svg { animation: howArrowFlow 2.4s ease-in-out infinite; }
.tcm-stepflow > .tcm-howarrow:nth-of-type(2) svg { animation-delay: .35s; }
.tcm-stepflow > .tcm-howarrow:nth-of-type(3) svg { animation-delay: .7s; }
@keyframes howIconFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.tcm-howicon { animation: howIconFloat 4.8s ease-in-out infinite; }
.tcm-stepflow > .tcm-stepcard:nth-of-type(2) .tcm-howicon { animation-delay: .7s; }
.tcm-stepflow > .tcm-stepcard:nth-of-type(3) .tcm-howicon { animation-delay: 1.4s; }
.tcm-stepflow > .tcm-stepcard:nth-of-type(4) .tcm-howicon { animation-delay: 2.1s; }
@media (prefers-reduced-motion: reduce) { .tcm-howarrow svg, .tcm-howicon { animation: none; } }
.tcm-howicon { position: relative; width: auto; min-width: 56px; height: 52px; display: grid; place-items: center; margin: 2px 0 16px; }
.tcm-howicon::before { content: ""; position: absolute; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle, var(--acc-soft), transparent 70%); filter: blur(16px); z-index: 0; opacity: .7; transition: opacity .3s var(--tc-ease); }
.tcm-howicon img { position: relative; z-index: 1; width: auto; height: 50px; max-width: 72px; object-fit: contain; opacity: .92;
  filter: saturate(.82) brightness(.96) drop-shadow(0 6px 15px rgba(16,70,190,.3));
  transition: transform .3s var(--tc-ease); }
.tcm-stepcard:hover .tcm-howicon img { transform: translateY(-3px) scale(1.04); }
.tcm-stepcard:hover .tcm-howicon::before { opacity: 1; }

/* ---- mode select cards ---- */
.tcm-mode { position: relative; text-align: left; cursor: pointer; border-radius: 18px; padding: 20px; overflow: hidden;
  background: var(--glass-2);
  border: 1px solid rgba(255,255,255,.07); transition: all .28s var(--tc-ease);
  display: flex; flex-direction: column; gap: 13px; }
.tcm-mode:hover { border-color: var(--gl-border-hi); transform: translateY(-3px); background: var(--glass); }
.tcm-mode.on { border-color: var(--acc-line); background: linear-gradient(170deg, var(--acc-soft), rgba(255,255,255,.02)); box-shadow: 0 18px 50px rgba(0,8,30,.5), inset 0 0 0 1px var(--acc-line); transform: translateY(-3px); }
.tcm-mode.on .tcm-ic { color: var(--acc-bright); background: var(--acc-soft); border-color: var(--acc-line); }

/* mode-card 3D emblem icon — feathered to blend into the card */
.tcm-modeicon { position: relative; width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 4px; }
.tcm-modeicon::before { content: ""; position: absolute; width: 88%; height: 88%; border-radius: 50%; background: radial-gradient(circle, var(--acc-soft), transparent 68%); filter: blur(16px); z-index: 0; opacity: .55; transition: opacity .3s var(--tc-ease); }
.tcm-modeicon img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(16,70,190,.4));
  -webkit-mask-image: radial-gradient(circle at 50% 48%, #000 56%, rgba(0,0,0,.55) 70%, transparent 80%);
  mask-image: radial-gradient(circle at 50% 48%, #000 56%, rgba(0,0,0,.55) 70%, transparent 80%);
  transition: transform .3s var(--tc-ease); }
.tcm-mode:hover .tcm-modeicon img { transform: translateY(-3px) scale(1.04); }
.tcm-mode.on .tcm-modeicon img { transform: scale(1.07); }
.tcm-mode.on .tcm-modeicon::before { opacity: .95; }

.tcm-detail { animation: tcm-fade .4s var(--tc-ease); }
@keyframes tcm-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tcm-detail { animation: none; } }

/* ---- pills / chips ---- */
.tcm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-family: var(--tc-font-head); font-weight: 600; font-size: 12px; color: var(--ink-2); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); }

/* ---- segmented control ---- */
.tcm-seg { display: inline-flex; gap: 3px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.tcm-seg button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: 999px; cursor: pointer; font-family: var(--tc-font-head); font-weight: 600; font-size: 13.5px; color: var(--ink-2); background: transparent; border: none; transition: all .2s; white-space: nowrap; }
.tcm-seg button:hover { color: var(--ink); }
.tcm-seg button.on { color: #fff; background: var(--acc); box-shadow: 0 6px 18px rgba(60,130,255,.4); }

/* ---- country select (interactive dropdown) ---- */
.tcm-cc { position: relative; }
.tcm-cc-btn { display: inline-flex; align-items: center; gap: 11px; min-width: 220px; justify-content: space-between; padding: 11px 15px; border-radius: 13px; font-family: var(--tc-font-head); font-weight: 600; font-size: 14.5px; color: var(--ink); background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.12); cursor: pointer; transition: border-color .18s, background .18s, box-shadow .18s; }
.tcm-cc-btn:hover { border-color: rgba(120,160,255,.42); background: rgba(255,255,255,.07); }
.tcm-cc-btn.open { border-color: var(--acc); background: rgba(60,130,255,.09); box-shadow: 0 0 0 3px rgba(60,130,255,.16); }
.tcm-cc-lbl { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.tcm-cc-btn .chev { transition: transform .22s var(--tc-ease); color: var(--ink-3); }
.tcm-cc-btn.open .chev { transform: rotate(180deg); }
.tcm-cc-back { position: fixed; inset: 0; z-index: 55; }
.tcm-cc-menu { position: absolute; top: calc(100% + 8px); right: 0; display: grid; gap: 6px; min-width: 100%; z-index: 60; padding: 6px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(21,29,56,.98), rgba(12,18,38,.98)); border: 1px solid rgba(120,150,235,.22);
  box-shadow: 0 22px 54px rgba(0,6,26,.62), inset 0 1px 0 rgba(255,255,255,.06); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  max-height: 326px; overflow-y: auto; transform-origin: top right; animation: tcm-cc-in .16s var(--tc-ease); }
@keyframes tcm-cc-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.tcm-cc-item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px 12px; border-radius: 9px; cursor: pointer;
  font-family: var(--tc-font-head); font-weight: 600; font-size: 13.5px; color: var(--ink-2); background: transparent; border: none; text-align: left; white-space: nowrap; transition: background .14s, color .14s; }
.tcm-cc-item:hover { background: rgba(120,160,255,.13); color: var(--ink); }
.tcm-cc-item.sel { background: rgba(60,130,255,.17); color: #fff; }
.tcm-cc-item .ck { margin-left: auto; display: inline-flex; color: var(--acc-bright); opacity: 0; transition: opacity .14s; }
.tcm-cc-item.sel .ck { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .tcm-cc-menu { animation: none; } }

/* ---- leaderboard ---- */
.tcm-podium { display: grid; grid-template-columns: 1fr 1.16fr 1fr; gap: 16px; align-items: end; margin-bottom: 16px; }
.tcm-pod { position: relative; border-radius: 22px; padding: 24px 18px; text-align: center; overflow: hidden;
  background: var(--glass-2); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255,255,255,.08); box-shadow: 0 18px 50px rgba(0,6,24,.4); }
.tcm-pod.first { padding: 32px 18px 28px; border-color: var(--acc-line); background: linear-gradient(180deg, var(--acc-soft), rgba(255,255,255,.02)); box-shadow: 0 26px 64px rgba(0,6,24,.5), inset 0 1px 0 rgba(255,255,255,.14); }
.tcm-lrow { position: relative; display: grid; align-items: center; gap: 12px; padding: 13px 24px; transition: background .18s; }
.tcm-lrow:hover { background: rgba(255,255,255,.035); }
.tcm-xpbar { position: relative; height: 4px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.tcm-xpbar > i { position: absolute; inset: 0 auto 0 0; width: var(--w, 50%); border-radius: 3px; background: linear-gradient(90deg, var(--acc), var(--acc-bright)); }

/* ---- podium: champion stage, frosted-arena premium ---- */
.pod-stage { display: flex; align-items: flex-end; justify-content: center; gap: 22px; max-width: 744px; margin: 30px auto 42px; position: relative; }
/* shared floor glow under the whole podium */
.pod-stage::after { content: ""; position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); width: 80%; height: 64px; border-radius: 50%; background: radial-gradient(ellipse, rgba(90,140,255,.18), transparent 72%); filter: blur(10px); pointer-events: none; }
.pod-col { flex: 1 1 0; min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; }
.pod-col.c1 { order: 2; z-index: 3; } .pod-col.c2 { order: 1; z-index: 2; } .pod-col.c3 { order: 3; z-index: 1; }
/* podium stagger: champion lifted + slightly wider so 1 > 2,3 reads instantly */
.pod-col.c1 { flex-grow: 1.18; margin-bottom: 30px; }
.pod-col.c2, .pod-col.c3 { flex-grow: .94; }

/* per-rank tokens: brand IP frame + matching metal accent for the card */
.pod-col.c1 { --frame: url(assets/frame-no1.png); --fw: 154px; --ar: 1.060; --cx: 50%; --cy: 50%; --diap: 47%; --line: linear-gradient(90deg, transparent, #ffd56b, #f0a82e, #ffd56b, transparent); --tint: rgba(255,180,60,.13); --edge: rgba(255,210,110,.20); --ov: 26px; }
.pod-col.c2 { --frame: url(assets/frame-no2.png); --fw: 100px; --ar: 0.760; --cx: 50%; --cy: 46.3%; --diap: 62%; --line: linear-gradient(90deg, transparent, #e3ecf8, #aebccf, transparent); --tint: rgba(200,214,235,.07); --edge: rgba(220,232,246,.16); --ov: 18px; }
.pod-col.c3 { --frame: url(assets/frame-no3.png); --fw: 104px; --ar: 0.857; --cx: 49%; --cy: 44.8%; --diap: 58%; --line: linear-gradient(90deg, transparent, #f0b888, #c47a3c, #f0b888, transparent); --tint: rgba(224,150,96,.07); --edge: rgba(240,184,136,.16); --ov: 18px; }

/* champion no longer uses the spotlight beam */
.pod-spot { display: none !important; }

/* brand IP frame with the trader photo set into its window */
.pod-frame-wrap { position: relative; width: var(--fw); aspect-ratio: var(--ar); z-index: 2; animation: pod-float 4.6s ease-in-out infinite; }
.pod-col.c2 .pod-frame-wrap { animation-duration: 5.3s; animation-delay: -1.3s; }
.pod-col.c3 .pod-frame-wrap { animation-duration: 5s; animation-delay: -2.5s; }
@keyframes pod-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
/* soft pulsing aura behind the champion avatar (replaces the old beam) */
.pod-col.c1 .pod-frame-wrap::before { content: ""; position: absolute; inset: 16%; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(255,212,120,.34), rgba(255,200,90,.08) 56%, transparent 72%); filter: blur(11px); animation: pod-aura 3.4s ease-in-out infinite; }
@keyframes pod-aura { 0%, 100% { opacity: .45; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }
.pod-ipframe { position: absolute; inset: 0; z-index: 2; background: var(--frame) center/contain no-repeat; pointer-events: none; filter: drop-shadow(0 10px 22px rgba(0,8,30,.5)); }
.pod-frame-wrap img, .pod-frame-wrap .pod-fb { position: absolute; left: var(--cx); top: var(--cy); transform: translate(-50%, -50%); width: var(--diap); aspect-ratio: 1; height: auto; border-radius: 50%; object-fit: cover; display: block; z-index: 1; background: #0b1330; }
.pod-fb { display: grid; place-items: center; font-family: var(--tc-font-display); font-weight: 800; font-size: 22px; color: #dce6f8; background: linear-gradient(160deg, #1d2c52, #0e1730); }

/* info card connected to the frame's banner */
.pod-card { width: 100%; margin-top: calc(var(--ov) * -1); padding: calc(var(--ov) + 4px) 12px 16px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; overflow: hidden; z-index: 1;
  background: linear-gradient(180deg, var(--tint), transparent 62%), var(--glass-2); -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--gl-border); box-shadow: 0 16px 44px rgba(0,6,26,.42), 0 0 0 1px var(--edge), inset 0 1px 0 rgba(255,255,255,.1); }
.pod-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 70px; background: linear-gradient(180deg, var(--tint), transparent); pointer-events: none; }
/* glass sheen sweep across the card */
.pod-card::after { content: ""; position: absolute; top: 0; left: -60%; width: 50%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.09), transparent); transform: skewX(-18deg); animation: pod-cardsheen 7.5s ease-in-out infinite; }
@keyframes pod-cardsheen { 0%, 68% { left: -60%; opacity: 0; } 74% { opacity: 1; } 100% { left: 170%; opacity: 0; } }
.pod-name { font-family: var(--tc-font-head); font-weight: 700; font-size: 15px; color: var(--ink); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.pod-loc { display: inline-flex; align-items: center; gap: 7px; font-family: var(--tc-font-body); font-weight: 500; font-size: 12px; color: var(--ink-2); }
.pod-roi { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; padding: 3px 9px; border-radius: 999px; font-family: var(--tc-font-display); font-weight: 700; font-size: 11.5px; letter-spacing: .2px; color: #41e0a0; background: rgba(52,226,154,.12); border: 1px solid rgba(52,226,154,.28); }
.pod-roi svg { width: 9px; height: 9px; }
.pod-val { font-family: var(--tc-font-display); font-weight: 800; font-size: 20px; letter-spacing: -.5px; color: var(--ink); line-height: 1; margin-top: 7px; }
.pod-val span { font-family: var(--tc-font-head); font-size: 11px; font-weight: 600; color: var(--ink-3); margin-left: 4px; letter-spacing: 0; }

/* champion richer */
.pod-col.c1 .pod-name { font-size: 17px; color: #fff; }
.pod-col.c1 .pod-val { font-size: 24px; color: #ffd76b; }
.pod-col.c1 .pod-loc { font-size: 12.5px; }

@media (prefers-reduced-motion: reduce) { .pod-card::after, .pod-frame-wrap, .pod-col.c1 .pod-frame-wrap::before { animation: none; } }

@media (max-width: 560px) {
  .pod-stage { gap: 8px; margin-bottom: 38px; }
  .pod-col.c1 { --fw: 116px; margin-bottom: 18px; } .pod-col.c2 { --fw: 84px; } .pod-col.c3 { --fw: 88px; }
  .pod-card { padding-left: 6px; padding-right: 6px; }
  .pod-name, .pod-col.c1 .pod-name { font-size: 12.5px; }
  .pod-val { font-size: 15px; } .pod-col.c1 .pod-val { font-size: 17px; }
  .pod-loc { font-size: 10px; } .pod-roi { font-size: 9.5px; }
}

/* ---- live dot (single accent) ---- */
.tcm-live { width: 7px; height: 7px; border-radius: 50%; background: var(--acc-bright); box-shadow: 0 0 8px var(--acc); animation: tcm-blink 1.8s var(--tc-ease) infinite; }
@keyframes tcm-blink { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .tcm-live { animation: none; } }

/* ---- CTA ---- */
.tcm-cta { position: relative; overflow: hidden; border-radius: 28px; padding: 52px 56px;
  background: var(--glass); -webkit-backdrop-filter: blur(26px) saturate(150%); backdrop-filter: blur(26px) saturate(150%);
  border: 1px solid var(--gl-border); box-shadow: 0 24px 70px rgba(0,6,26,.5), inset 0 1px 0 rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.tcm-cta::before { content: ""; position: absolute; width: 460px; height: 460px; border-radius: 50%; right: -120px; top: -180px; background: radial-gradient(circle, var(--acc-soft), transparent 70%); filter: blur(40px); pointer-events: none; }

/* ---- responsive ---- */
@media (max-width: 1024px) {
  .tcm-stepflow { flex-wrap: wrap; gap: 14px; } .tcm-howarrow { display: none; } .tcm-stepcard { flex: 1 1 calc(50% - 7px); }
  .tcm-mode-row { grid-template-columns: 1fr 1fr !important; }
  .tcm-bullet-row { grid-template-columns: 1fr 1fr !important; }
  .tcm-podium { grid-template-columns: 1fr; } .tcm-pod.first { order: -1; } .pod3.p1 { order: -1; }
}
@media (max-width: 760px) {
  .tcm-stat-row { grid-template-columns: 1fr 1fr !important; }
  .tcm-detail-cols { grid-template-columns: 1fr 1fr !important; }
  .tcm-lhead, .tcm-lrow { grid-template-columns: 48px 1fr 96px !important; }
  .tcm-lcountry { display: none !important; }
}
@media (max-width: 560px) {
  .tcm-stepcard { flex: 1 1 100%; }
  .tcm-mode-row { grid-template-columns: 1fr !important; }
  .tcm-bullet-row { grid-template-columns: 1fr !important; }
  .tcm-detail-cols { grid-template-columns: 1fr !important; }
  .tcm-cta { padding: 34px 26px; }
}

/* ============================================================
   ARENA Token page
   ============================================================ */
.tok-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; padding: 56px 0 40px; }
.tok-hero-main { padding: 0; min-height: 640px; box-sizing: border-box; }

/* hero artwork (right) — glow PNG composited on dark via screen blend */
.tok-herofig { position: relative; display: flex; align-items: center; justify-content: center; overflow: visible; }
.tok-herofig img { width: 260%; max-width: 1520px; height: auto; display: block; margin-right: -42%;
  mix-blend-mode: screen; filter: saturate(1.02) brightness(1); opacity: .6;
  -webkit-mask-image: radial-gradient(66% 72% at 50% 50%, #000 46%, rgba(0,0,0,.5) 70%, transparent 100%);
  mask-image: radial-gradient(66% 72% at 50% 50%, #000 46%, rgba(0,0,0,.5) 70%, transparent 100%); }
.tok-steprail { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 26px 0 30px; }

/* partners hero — full-bleed cinematic background (transparent glow PNG) */
.ptr-herobg { position: relative; width: 100%; overflow: hidden; isolation: isolate; min-height: 640px; display: flex; flex-direction: column; justify-content: center;
  background: url('assets/ptr-hero-bg3-new.png') no-repeat;
  background-image: image-set(url('assets/ptr-hero-bg3-new.webp') type('image/webp'), url('assets/ptr-hero-bg3-new.png') type('image/png'));
  background-size: cover; background-position: center 58%; }
.ptr-herobg::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(90% 80% at 50% 34%, transparent 42%, rgba(5,9,22,.62) 100%),
    linear-gradient(180deg, rgba(34,64,140,.28) 0%, transparent 30%),
    linear-gradient(0deg, #060a18 0%, rgba(6,10,24,.5) 10%, transparent 34%),
    linear-gradient(90deg, rgba(6,10,24,.4) 0%, transparent 26%, transparent 74%, rgba(6,10,24,.4) 100%); }
.ptr-herobg > * { position: relative; z-index: 2; }
@media (max-width: 980px) {
  .ptr-herobg { background-position: center 30%; }
}
.tok-step { display: inline-flex; align-items: center; gap: 9px; }
.tok-step b { font-family: var(--tc-font-display); font-weight: 600; font-size: 12px; color: var(--acc); }
.tok-step span { font-family: var(--tc-font-head); font-weight: 600; font-size: 14.5px; color: var(--ink); }
.tok-step.last span { color: var(--acc-bright); }
.tok-arrow { color: var(--ink-3); display: grid; place-items: center; }

.tok-orbit { position: relative; width: 100%; max-width: 420px; aspect-ratio: 1; margin: 0 auto; }
.tok-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.08); top: 50%; left: 50%; transform: translate(-50%,-50%); }
.tok-ring.r1 { width: 100%; height: 100%; }
.tok-ring.r2 { width: 66%; height: 66%; border-color: var(--acc-line); border-style: dashed; animation: tok-spin 36s linear infinite; }
.tok-ring.r3 { width: 33%; height: 33%; }
@keyframes tok-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tok-ring.r2 { animation: none; } }
.tok-coin { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 138px; height: 138px; border-radius: 50%;
  display: grid; place-items: center; text-align: center; color: #fff;
  background: radial-gradient(120% 120% at 32% 24%, rgba(255,255,255,.32), rgba(255,255,255,.05) 42%, transparent 64%), linear-gradient(160deg, rgba(90,150,255,.5), rgba(26,44,110,.7));
  border: 1px solid rgba(255,255,255,.3); box-shadow: 0 20px 50px rgba(10,30,90,.6), inset 0 2px 6px rgba(255,255,255,.45), inset 0 -12px 22px rgba(10,22,70,.6); }
.tok-coin b { font-family: var(--tc-font-display); font-weight: 800; font-size: 22px; letter-spacing: 1px; display: block; }
.tok-coin span { font-family: var(--tc-font-head); font-weight: 600; font-size: 11px; letter-spacing: 3px; color: rgba(220,232,255,.7); }
.tok-chip { position: absolute; display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px; border-radius: 14px; white-space: nowrap;
  background: var(--glass-2); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--gl-border); box-shadow: 0 12px 30px rgba(0,8,30,.4); }
.tok-chip i { font-family: var(--tc-font-display); font-weight: 700; font-size: 11px; color: var(--acc); }
.tok-chip span { font-family: var(--tc-font-head); font-weight: 600; font-size: 13px; color: var(--ink); }
.tok-chip.c1 { top: 6%; right: -6%; } .tok-chip.c2 { top: 52%; right: -10%; } .tok-chip.c3 { bottom: 8%; left: -6%; }

.tok-ghost { position: absolute; right: 18px; bottom: 6px; font-family: var(--tc-font-display); font-weight: 800; font-size: 88px; line-height: 1; color: rgba(255,255,255,.025); pointer-events: none; letter-spacing: -2px; }

.tok-bar { position: relative; height: 4px; border-radius: 3px; background: rgba(255,255,255,.07); overflow: hidden; margin-top: 12px; }
.tok-bar > i { position: absolute; inset: 0 auto 0 0; width: var(--w,40%); border-radius: 3px; background: linear-gradient(90deg, var(--acc), var(--acc-bright)); }
.tok-alloc { position: relative; display: grid; grid-template-columns: 1fr 200px 70px; gap: 14px; align-items: center; padding: 19px 4px; border-top: 1px solid rgba(255,255,255,.06); }
.tok-alloc:first-of-type { border-top: none; }

@media (max-width: 980px) {
  .tok-hero { grid-template-columns: 1fr; gap: 30px; }
  .tok-hero-main { min-height: 0; padding: 36px 0; }
  .tok-orbit { max-width: 340px; order: -1; }
  .tok-2col { grid-template-columns: 1fr !important; }
  .tok-herofig { overflow: hidden; }
  .tok-herofig img { width: 220%; margin: 0 auto; max-width: 1180px; }
  .tok-alloc { grid-template-columns: 1fr 120px 56px !important; gap: 10px; }
}
@media (max-width: 620px) {
  .tok-3col { grid-template-columns: 1fr !important; }
  .tok-pillars { grid-template-columns: 1fr !important; }
  .tok-herofig img { width: 224%; max-width: none; }
  .tok-alloc { grid-template-columns: 1fr 80px !important; }
  .tok-alloc .tok-amt { display: none; }
}

/* ---- range sliders (Wealth calculator) ---- */
.tcm-range { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 3px; outline: none; cursor: pointer;
  background: linear-gradient(90deg, var(--acc) 0%, var(--acc) var(--p,50%), rgba(255,255,255,.1) var(--p,50%), rgba(255,255,255,.1) 100%); }
.tcm-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #fff, var(--acc-bright) 55%, var(--acc)); border: 2px solid #0a1024; box-shadow: 0 2px 8px rgba(30,80,200,.6); cursor: pointer; }
.tcm-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--acc-bright); border: 2px solid #0a1024; box-shadow: 0 2px 8px rgba(30,80,200,.6); cursor: pointer; }
.tcm-calctab { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.08); }
.tcm-calctab button { padding: 12px; border-radius: 11px; border: none; cursor: pointer; font-family: var(--tc-font-head); font-weight: 600; font-size: 15px; color: var(--ink-2); background: transparent; transition: all .2s; }
.tcm-calctab button.on { color: #fff; background: var(--glass); border: 1px solid var(--gl-border); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
@media (max-width: 980px) { .tcm-calc { grid-template-columns: 1fr !important; } .tcm-calcgrid { grid-template-columns: 1fr 1fr !important; } .tcm-why { grid-template-columns: 1fr !important; } }
@media (max-width: 560px) { .tcm-calcgrid { grid-template-columns: 1fr !important; } }

/* ---- custom dropdown (matches homepage language popover) ---- */
.tcm-dd { position: relative; }
.tcm-dd-trigger { width: 100%; display: flex; align-items: center; gap: 10px; background: rgba(10,16,34,.55);
  border: 1px solid var(--gl-border); border-radius: 12px; padding: 13px 14px; color: var(--ink);
  font-family: var(--tc-font-body); font-weight: 600; font-size: 14px; cursor: pointer; transition: .18s; text-align: left; }
.tcm-dd-trigger:hover { border-color: var(--gl-border-hi); }
.tcm-dd-trigger.open { border-color: var(--acc-line); box-shadow: 0 0 0 3px var(--acc-soft); }
.tcm-dd-trigger .lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcm-dd-trigger .cv { flex: 0 0 auto; color: var(--ink-3); transition: transform .2s; display: grid; }
.tcm-dd-trigger.open .cv { transform: rotate(180deg); }
.tcm-dd-pop { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 80; padding: 6px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(21,29,56,.98), rgba(12,18,38,.98)); border: 1px solid rgba(120,150,235,.22);
  box-shadow: 0 22px 54px rgba(0,6,26,.62), inset 0 1px 0 rgba(255,255,255,.06); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  max-height: 286px; overflow-y: auto; animation: ddIn .16s ease; }
@keyframes ddIn { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
.tcm-dd-item { width: 100%; display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 9px;
  border: none; background: transparent; color: var(--ink-2); font-family: var(--tc-font-head);
  font-weight: 600; font-size: 13.5px; cursor: pointer; transition: background .14s, color .14s; text-align: left; }
.tcm-dd-item:hover { background: rgba(120,160,255,.13); color: var(--ink); }
.tcm-dd-item.on { background: rgba(60,130,255,.17); color: #fff; }
.tcm-dd-item .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcm-dd-item .mul { flex: 0 0 auto; font-family: var(--tc-font-display); font-weight: 700; font-size: 12px; color: var(--ink-3); }
.tcm-dd-item.on .mul { color: var(--acc-bright); }
.tcm-dd-item .ck { flex: 0 0 auto; margin-left: 2px; opacity: 0; color: var(--acc-bright); display: grid; }
.tcm-dd-item.on .ck { opacity: 1; }
.tcm-dd-pop::-webkit-scrollbar { width: 8px; }
.tcm-dd-pop::-webkit-scrollbar-thumb { background: rgba(120,160,255,.28); border-radius: 8px; }
.tcm-dd-pop::-webkit-scrollbar-track { background: transparent; }

/* ---- Wealth cinematic hero (background image) ---- */
.wlth-hero { position: relative; display: flex; align-items: center; min-height: 640px; overflow: hidden;
  border-bottom: 1px solid rgba(70,130,255,.14); isolation: isolate; }
.wlth-hero-bg { position: absolute; inset: 0; z-index: 0;
  background-image: url("assets/wealth-hero-bg6.png");
  background-size: cover; background-position: 30% center; background-repeat: no-repeat; }
.wlth-hero-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background:
  linear-gradient(90deg, #04060F 0%, rgba(4,6,15,.94) 24%, rgba(4,6,15,.66) 44%, rgba(4,6,15,.22) 62%, rgba(4,6,15,0) 80%),
  linear-gradient(0deg, #04060F 0%, rgba(4,6,15,.5) 12%, rgba(4,6,15,0) 34%),
  linear-gradient(180deg, rgba(4,6,15,.5) 0%, rgba(4,6,15,0) 22%); }
.wlth-hero-inner { position: relative; z-index: 2; width: 100%; max-width: 1280px; margin: 0 auto; padding: 60px 26px; }
@media (max-width: 900px) {
  .wlth-hero { min-height: 560px; }
  .wlth-hero-bg { background-position: 76% center; }
  .wlth-hero-scrim { background:
    linear-gradient(90deg, #04060F 0%, rgba(4,6,15,.9) 40%, rgba(4,6,15,.55) 70%, rgba(4,6,15,.2) 100%),
    linear-gradient(0deg, #04060F 0%, rgba(4,6,15,.4) 16%, rgba(4,6,15,0) 40%); }
}
@media (max-width: 560px) { .wlth-hero { min-height: 500px; } }

/* ---- Support cinematic hero (background image) ---- */
.sup-hero { position: relative; display: flex; align-items: center; min-height: 640px; overflow: hidden;
  border-bottom: 1px solid rgba(70,130,255,.14); isolation: isolate; }
.sup-hero-bg { position: absolute; inset: 0; z-index: 0; opacity: .62;
  background-image: url("assets/support-hero-bg.png");
  background-image: image-set(url("assets/support-hero-bg.webp") type("image/webp"), url("assets/support-hero-bg.png") type("image/png"));
  background-size: cover; background-position: center; background-repeat: no-repeat; }
.sup-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(90% 80% at 50% 30%, transparent 42%, rgba(5,9,22,.62) 100%),
    linear-gradient(180deg, rgba(34,64,140,.26) 0%, transparent 30%),
    linear-gradient(0deg, #060a18 0%, rgba(6,10,24,.5) 10%, transparent 34%),
    linear-gradient(90deg, rgba(6,10,24,.4) 0%, transparent 26%, transparent 74%, rgba(6,10,24,.4) 100%); }
.sup-hero-inner { position: relative; z-index: 2; width: 100%; max-width: 1280px; margin: 0 auto; padding: 56px 26px; }
.sup-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; }
@media (max-width: 900px) {
  .sup-hero { min-height: auto; }
  .sup-hero-bg { background-position: 72% center, center; }
  .sup-hero-grid { grid-template-columns: 1fr; gap: 26px; }
}

/* ============================================================
   PARTNERSHIP page — module-distinct layouts + motion system
   ============================================================ */

/* shared icon medallion (one consistent treatment across the whole page) */
.ptr-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  flex: 0 0 auto; color: var(--acc-bright); background: var(--acc-soft); border: 1px solid var(--acc-line);
  transition: transform .35s var(--tc-ease), background .35s, box-shadow .35s; }

/* unified card float on hover (微悬浮) */
.ptr-float { transition: transform .4s cubic-bezier(.2,.8,.2,1), border-color .4s, box-shadow .4s, background .4s; }
.ptr-float:hover { transform: translateY(-6px); border-color: var(--acc-line); box-shadow: 0 28px 64px rgba(0,8,32,.5); }
.ptr-float:hover .ptr-ic { transform: translateY(-2px) scale(1.06); box-shadow: 0 8px 22px rgba(40,110,255,.4); }

/* primary-button sheen (流光) + press feedback (微压感) */
.ptr-shine { position: relative; overflow: hidden; }
.ptr-shine::after { content: ""; position: absolute; top: 0; left: -140%; width: 55%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent); transform: skewX(-18deg);
  animation: ptr-sheen 4.6s ease-in-out infinite; }
@keyframes ptr-sheen { 0%, 58% { left: -140%; } 82%, 100% { left: 150%; } }
.ptr-press { transition: transform .14s ease, box-shadow .2s ease, border-color .2s, background .2s; }
.ptr-press:active { transform: scale(.955); }
@media (prefers-reduced-motion: reduce) { .ptr-shine::after { animation: none; display: none; } }

/* staggered entrance — child reveal cascade */
.ptr-cascade > .tcm-reveal { transition-delay: var(--d, 0s); }

/* ---- MODELS: horizontal auto-scroll marquee (一排横向自动滚动) ---- */
.ptr-marquee { position: relative; overflow: hidden; padding: 6px 0 10px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.ptr-track { display: flex; gap: 18px; width: max-content; animation: ptr-scroll 40s linear infinite; }
.ptr-marquee:hover .ptr-track { animation-play-state: paused; }
@keyframes ptr-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ptr-mcard { flex: 0 0 312px; width: 312px; border-radius: 18px; padding: 24px; display: flex; flex-direction: column;
  background: var(--glass-2); border: 1px solid rgba(255,255,255,.08); }
.ptr-mcard .ptr-mnum { position: absolute; top: 18px; right: 22px; font-family: var(--tc-font-display); font-weight: 800;
  font-size: 40px; line-height: 1; color: rgba(198,216,255,.09); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .ptr-track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; } .ptr-dup { display: none; } }

/* ---- RISK: 3×2 guarantee grid, top accent bar ---- */
.ptr-riskgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ptr-riskcard { position: relative; border-radius: 18px; padding: 26px 24px 24px; overflow: hidden;
  background: var(--glass-2); border: 1px solid rgba(255,255,255,.08); }
.ptr-riskcard::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--acc), transparent); opacity: .5; transition: opacity .4s; }
.ptr-riskcard:hover::before { opacity: 1; }
.ptr-riskhead { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; }
@media (max-width: 920px) { .ptr-riskgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .ptr-riskgrid { grid-template-columns: 1fr; } }

/* ---- INFRA: clean technical list (icon node + title + desc rows) ---- */
.ptr-rail { position: relative; max-width: 940px; margin: 0 auto; display: flex; flex-direction: column; gap: 0; }
.ptr-railrow { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 22px; align-items: center;
  padding: 22px 4px; border-top: 1px solid rgba(255,255,255,.07); }
.ptr-railrow:first-child { border-top: none; }
.ptr-railnode { position: relative; width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; z-index: 1;
  color: var(--acc-bright); background: var(--acc-soft); border: 1px solid var(--acc-line);
  transition: transform .35s var(--tc-ease), box-shadow .35s; }
.ptr-railrow:hover .ptr-railnode { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(40,110,255,.4); }

/* tighten section rhythm to cut empty space (占位大) */
.ptr-sec { padding: 52px 0 !important; }
@media (max-width: 600px) { .ptr-sec { padding: 40px 0 !important; } }

/* ---- SUMMARY: revenue fact-tile bento (replaces tall spec list) ---- */
.ptr-statgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 980px; margin: 0 auto; }
.ptr-stat { position: relative; display: flex; gap: 15px; align-items: flex-start; padding: 22px 24px; border-radius: 16px; overflow: hidden;
  background: var(--glass-2); border: 1px solid rgba(255,255,255,.08); }
.ptr-stat::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, transparent, var(--acc), transparent); opacity: .55; transition: opacity .4s; }
.ptr-stat:hover::before { opacity: 1; }
.ptr-stat-k { font-family: var(--tc-font-head); font-weight: 600; font-size: 12.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--acc-bright); margin-bottom: 8px; }
.ptr-stat-v { font-family: var(--tc-font-body); font-weight: 500; font-size: 15px; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.ptr-stat-wide { grid-column: 1 / -1; }
@media (max-width: 600px) { .ptr-statgrid { grid-template-columns: 1fr; } }

/* ============================================================
   AGENTS page (代理计划) — same motion system, distinct modules
   ============================================================ */

/* hero full-bleed background (transparent glow PNG, supplied by user) */
.agt-herobg { position: relative; width: 100%; overflow: hidden; isolation: isolate; min-height: 640px; display: flex; align-items: center;
  background: var(--tc-bg, #04060f); }
.agt-herobg::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .24;
  background: url('assets/agt-hero-bg.png') no-repeat;
  background-image: image-set(url('assets/agt-hero-bg.webp') type('image/webp'), url('assets/agt-hero-bg.png') type('image/png'));
  background-size: 142%; background-position: 50% 16%; }
.agt-herobg > * { position: relative; z-index: 2; width: 100%; }
.agt-herobg::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(46% 40% at 50% 4%, rgba(40,86,180,.5), transparent 72%),
    radial-gradient(90% 80% at 50% 30%, transparent 44%, rgba(5,9,22,.6) 100%),
    linear-gradient(180deg, rgba(34,64,140,.3) 0%, transparent 32%),
    linear-gradient(0deg, var(--tc-bg, #060a18) 0%, rgba(6,10,24,.5) 12%, transparent 34%),
    linear-gradient(90deg, rgba(6,10,24,.4) 0%, transparent 26%, transparent 74%, rgba(6,10,24,.4) 100%); }
@media (max-width: 600px) { .agt-herobg { min-height: 480px; background-size: 200%; background-position: 50% 14%; } }

/* TIERS — commission-pool split visualization */
.agt-poolbar { display: flex; height: 58px; border-radius: 14px; overflow: hidden; max-width: 880px; margin: 0 auto 18px; border: 1px solid rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.agt-poolseg { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #fff; }
.agt-poolseg + .agt-poolseg { border-left: 1px solid rgba(255,255,255,.18); }
.agt-poolseg .pct { font-family: var(--tc-font-display); font-weight: 800; font-size: 19px; line-height: 1; color: var(--ink); }
.agt-poolseg .lbl { font-family: var(--tc-font-head); font-weight: 600; font-size: 11.5px; letter-spacing: .3px; color: var(--ink-2); }
.agt-tiergrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.agt-tier { position: relative; border-radius: 18px; padding: 24px; background: var(--glass-2); border: 1px solid rgba(255,255,255,.08); overflow: hidden; }
.agt-wbar { position: relative; height: 6px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: 16px; }
.agt-wbar > i { position: absolute; inset: 0 auto 0 0; border-radius: 4px; background: linear-gradient(90deg, var(--acc), var(--acc-bright)); transition: width .9s var(--tc-ease); }
@media (max-width: 760px) { .agt-tiergrid { grid-template-columns: 1fr; } .agt-poolbar { height: 56px; } }

/* TIERS — premium distribution breakdown (3 weighted rows) */
.agt-pool2 { max-width: 900px; margin: 0 auto; border-radius: 22px; padding: 0 30px 8px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.016)); border: 1px solid var(--gl-border);
  -webkit-backdrop-filter: blur(26px) saturate(150%); backdrop-filter: blur(26px) saturate(150%);
  box-shadow: 0 30px 72px rgba(0,6,26,.5), inset 0 1px 0 rgba(255,255,255,.12); }
.agt-pool2-hd { display: flex; align-items: center; gap: 14px; margin: 0 -30px; padding: 22px 30px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012)); border-bottom: 1px solid rgba(255,255,255,.1); }
.agt-pool2-hd .ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: 0 0 auto; color: var(--acc-bright); background: linear-gradient(160deg, var(--acc-soft), rgba(255,255,255,.02)); border: 1px solid var(--acc-line); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
.agt-pool2-hdtx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.agt-pool2-hd .eb { font-family: var(--tc-font-head); font-weight: 600; font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-3); }
.agt-pool2-hd .hl { font-family: var(--tc-font-head); font-weight: 700; font-size: 18px; color: var(--ink); letter-spacing: .2px; line-height: 1.1; }
.agt-pool2-row { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: start; padding: 22px 30px; margin: 0 -30px; border-top: 1px solid rgba(255,255,255,.06); }
.agt-pool2-row:first-of-type { border-top: none; }
/* descending hierarchy: rk0 = highest weight, rk2 = lowest */
.agt-pool2-row.rk0 { background: linear-gradient(90deg, rgba(95,170,255,.11), rgba(95,170,255,.02) 72%, transparent); }
.agt-pool2-chip { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; flex: 0 0 auto;
  font-family: var(--tc-font-display); font-weight: 800; font-size: 13px; letter-spacing: .5px; color: var(--acc-bright);
  background: linear-gradient(160deg, var(--acc-soft), rgba(255,255,255,.015)); border: 1px solid var(--acc-line); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.agt-pool2-row.rk0 .agt-pool2-chip { color: #fff; background: linear-gradient(160deg, var(--acc), #2a5bc4); border-color: rgba(150,190,255,.5); box-shadow: 0 6px 16px rgba(40,90,230,.45), inset 0 1px 0 rgba(255,255,255,.2); }
.agt-pool2-row.rk2 .agt-pool2-chip { color: var(--ink-3); background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.1); box-shadow: none; }
.agt-pool2-main { min-width: 0; }
.agt-pool2-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.agt-pool2-rolewrap { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.agt-pool2-role { font-family: var(--tc-font-head); font-weight: 600; font-size: 16px; color: var(--ink); margin: 0; }
.agt-pool2-row.rk0 .agt-pool2-role { font-weight: 700; font-size: 17px; }
.agt-pool2-row.rk2 .agt-pool2-role { color: var(--ink-2); }
.agt-pool2-tag { font-family: var(--tc-font-head); font-weight: 700; font-size: 10.5px; letter-spacing: .5px; color: var(--acc-bright); padding: 3px 9px; border-radius: 999px; background: var(--acc-soft); border: 1px solid var(--acc-line); white-space: nowrap; flex: 0 0 auto; }
.agt-pool2-desc { font-family: var(--tc-font-body); font-weight: 500; font-size: 13px; line-height: 1.5; color: var(--ink-2); margin: 5px 0 0; text-wrap: pretty; }
.agt-pool2-row.rk2 .agt-pool2-desc { color: var(--ink-3); }
.agt-pool2-track { height: 7px; border-radius: 6px; background: rgba(0,0,0,.3); overflow: hidden; margin-top: 14px; box-shadow: inset 0 1px 2px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.04); }
.agt-pool2-row.rk0 .agt-pool2-track { height: 8px; }
.agt-pool2-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, rgba(80,140,245,.55), var(--acc-bright)); box-shadow: 0 0 14px rgba(95,170,255,.55), inset 0 1px 0 rgba(255,255,255,.35); transition: width 1.1s var(--tc-ease); }
.agt-pool2-row.rk0 .agt-pool2-fill { background: linear-gradient(90deg, rgba(95,160,255,.75), #7cb6ff); box-shadow: 0 0 18px rgba(95,170,255,.7), inset 0 1px 0 rgba(255,255,255,.45); }
.agt-pool2-row.rk1 .agt-pool2-fill { background: linear-gradient(90deg, rgba(75,125,215,.5), #5a90e0); box-shadow: 0 0 8px rgba(80,140,230,.4), inset 0 1px 0 rgba(255,255,255,.25); }
.agt-pool2-row.rk2 .agt-pool2-fill { background: linear-gradient(90deg, rgba(64,92,158,.5), #5570ac); box-shadow: inset 0 1px 0 rgba(255,255,255,.15); }
.agt-pool2-pct { font-family: var(--tc-font-display); font-weight: 800; font-size: 30px; line-height: 1; letter-spacing: -.5px; flex: 0 0 auto;
  background: linear-gradient(165deg, #ffffff 24%, #bcd6ff 70%, #82abee); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 9px rgba(120,170,255,.32)); }
.agt-pool2-row.rk0 .agt-pool2-pct { font-size: 36px; filter: drop-shadow(0 3px 12px rgba(120,170,255,.45)); }
.agt-pool2-row.rk1 .agt-pool2-pct { font-size: 29px; background: linear-gradient(165deg, #e2ecfb 24%, #a7c2ef 78%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: none; }
.agt-pool2-row.rk2 .agt-pool2-pct { font-size: 24px; background: linear-gradient(165deg, #b4c2da 24%, #8197ba 78%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: none; }
@media (max-width: 680px) {
  .agt-pool2 { padding: 0 18px 6px; }
  .agt-pool2-hd { margin: 0 -18px; padding: 20px 18px; }
  .agt-pool2-row { margin: 0 -18px; padding: 20px 18px; }
  .agt-pool2-row.rk0 .agt-pool2-pct { font-size: 30px; }
}

/* TIERS v2 — donut allocation chart + legend */
.agt-donut-card { max-width: 880px; margin: 0 auto; border-radius: 22px; padding: 34px 38px; display: grid; grid-template-columns: 200px 1fr; gap: 44px; align-items: center;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.016)); border: 1px solid var(--gl-border);
  -webkit-backdrop-filter: blur(26px) saturate(150%); backdrop-filter: blur(26px) saturate(150%); box-shadow: 0 30px 72px rgba(0,6,26,.5), inset 0 1px 0 rgba(255,255,255,.12); }
.agt-donut { position: relative; width: 200px; height: 200px; flex: 0 0 auto; }
.agt-donut svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 10px 26px rgba(20,60,160,.45)); }
.agt-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center; pointer-events: none; }
.agt-donut-center .ic { color: var(--acc-bright); margin-bottom: 3px; display: grid; }
.agt-donut-center .eb { font-family: var(--tc-font-head); font-weight: 600; font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-3); }
.agt-donut-center .v { font-family: var(--tc-font-head); font-weight: 700; font-size: 16px; color: var(--ink); letter-spacing: .2px; }
.agt-legend { display: flex; flex-direction: column; min-width: 0; }
.agt-legend-row { display: grid; grid-template-columns: auto 1fr auto; gap: 15px; align-items: center; padding: 17px 0; border-top: 1px solid rgba(255,255,255,.07); }
.agt-legend-row:first-child { border-top: none; padding-top: 2px; }
.agt-legend-row:last-child { padding-bottom: 2px; }
.agt-legend-sw { width: 13px; height: 13px; border-radius: 4px; flex: 0 0 auto; box-shadow: 0 0 12px currentColor; }
.agt-legend-tx { min-width: 0; }
.agt-legend-role { font-family: var(--tc-font-head); font-weight: 600; font-size: 15.5px; color: var(--ink); margin: 0; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.agt-legend-row.top .agt-legend-role { font-weight: 700; }
.agt-legend-row.dim .agt-legend-role { color: var(--ink-2); }
.agt-legend-chip { font-family: var(--tc-font-display); font-weight: 700; font-size: 10.5px; letter-spacing: .5px; color: var(--ink-2); padding: 2px 8px; border-radius: 6px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); flex: 0 0 auto; }
.agt-legend-tag { font-family: var(--tc-font-head); font-weight: 700; font-size: 10px; letter-spacing: .4px; color: var(--acc-bright); padding: 2px 8px; border-radius: 999px; background: var(--acc-soft); border: 1px solid var(--acc-line); flex: 0 0 auto; }
.agt-legend-desc { font-family: var(--tc-font-body); font-weight: 500; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); margin: 5px 0 0; text-wrap: pretty; }
.agt-legend-row.dim .agt-legend-desc { color: var(--ink-3); }
.agt-legend-pct { font-family: var(--tc-font-display); font-weight: 800; font-size: 27px; line-height: 1; letter-spacing: -.5px; flex: 0 0 auto;
  background: linear-gradient(165deg, #ffffff 26%, #bcd6ff 74%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.agt-legend-row.top .agt-legend-pct { font-size: 31px; }
.agt-legend-row.dim .agt-legend-pct { font-size: 24px; background: linear-gradient(165deg, #c2cee2 26%, #8a9fc2 78%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
@media (max-width: 720px) {
  .agt-donut-card { grid-template-columns: 1fr; gap: 26px; justify-items: center; padding: 28px 22px; }
  .agt-legend { width: 100%; }
}

/* LEVELS — rank tier cards (metal-coded progression) */
.agt-rankcards { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.agt-rankcard { position: relative; border-radius: 18px; padding: 22px; background: var(--glass-2); border: 1px solid rgba(255,255,255,.08); overflow: hidden; }
.agt-rankcard::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .6; background: radial-gradient(115% 80% at 0% 0%, rgba(77,151,255,.10), transparent 56%); }
.agt-rankcard > * { position: relative; z-index: 1; }
.agt-rankcard-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.agt-crest-img { width: 60px; height: 60px; object-fit: contain; display: block; flex: 0 0 auto; filter: drop-shadow(0 6px 14px rgba(0,8,30,.5)); transition: transform .35s var(--tc-ease); }
.agt-rankcard:hover .agt-crest-img { transform: translateY(-2px) scale(1.05); }
.agt-rankmult { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.agt-rankmult .lab { font-family: var(--tc-font-display); font-weight: 700; font-size: 9.5px; letter-spacing: 1.5px; color: var(--ink-3); }
.agt-rankmult .val { font-family: var(--tc-font-display); font-weight: 800; font-size: 28px; line-height: 1; letter-spacing: -.5px; display: inline-flex; align-items: baseline;
  background: linear-gradient(165deg, #ffffff 24%, #b8d4ff 72%, #7ea8ee); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(120,170,255,.3)); }
.agt-rankmult .val i { font-style: normal; font-family: var(--tc-font-head); font-weight: 600; font-size: 14px; -webkit-text-fill-color: var(--ink-3); color: var(--ink-3); margin-right: 2px; transform: translateY(-1px); }
.agt-rankname { font-family: var(--tc-font-head); font-weight: 600; font-size: 16.5px; color: var(--ink); margin: 0 0 16px; }
.agt-rankreq { display: flex; gap: 12px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.07); }
.agt-rankreq .s { flex: 1; min-width: 0; }
.agt-rankreq .k { font-family: var(--tc-font-head); font-weight: 600; font-size: 11px; letter-spacing: .3px; color: var(--ink-3); margin-bottom: 4px; }
.agt-rankreq .v { font-family: var(--tc-font-display); font-weight: 700; font-size: 16px; color: var(--ink); }
@media (max-width: 860px) { .agt-rankcards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .agt-rankcards { grid-template-columns: 1fr; } }

/* COMPLIANCE — 2-col rule tiles */
.agt-rulegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 940px; margin: 0 auto; }
.agt-rule { display: flex; gap: 20px; align-items: center; padding: 22px 26px; border-radius: 16px; background: var(--glass-2); border: 1px solid rgba(255,255,255,.08); }
.agt-rule-n { font-family: var(--tc-font-display); font-weight: 800; font-size: 25px; line-height: 1; letter-spacing: -.5px; flex: 0 0 auto; min-width: 34px;
  background: linear-gradient(165deg, #ffffff 26%, #aecbff 78%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 8px rgba(120,170,255,.28)); }
.agt-rule-div { width: 1px; align-self: stretch; flex: 0 0 auto; margin: 3px 0; background: linear-gradient(180deg, transparent, rgba(255,255,255,.16), transparent); }
.agt-rule-tx { font-family: var(--tc-font-body); font-weight: 500; font-size: 15px; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
@media (max-width: 700px) { .agt-rulegrid { grid-template-columns: 1fr; } }

/* CLOSING band (no CTA button) */
.agt-close { position: relative; overflow: hidden; border-radius: 24px; padding: 50px 40px; text-align: center; max-width: 880px; margin: 0 auto;
  background: var(--glass); border: 1px solid var(--gl-border); box-shadow: 0 24px 70px rgba(0,6,26,.5), inset 0 1px 0 rgba(255,255,255,.12); }
.agt-close::before { content: ""; position: absolute; width: 460px; height: 460px; border-radius: 50%; right: -130px; top: -190px; background: radial-gradient(circle, var(--acc-soft), transparent 70%); filter: blur(40px); pointer-events: none; }
.agt-pillars { display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.agt-pillar { display: inline-flex; align-items: center; gap: 10px; font-family: var(--tc-font-head); font-weight: 600; font-size: 14px; color: var(--ink-2); }
.agt-pillar .ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--acc-bright); background: var(--acc-soft); border: 1px solid var(--acc-line); }

/* ============================================================
   REWARDS CENTER (奖励中心) — gold-accented, premium, animated
   ============================================================ */
:root { --gold: #f2c14e; --gold-bright: #ffd877; --gold-soft: rgba(242,193,78,.13); --gold-line: rgba(242,193,78,.4); }

/* hero — CSS horizon light-beams (brand blue, gold focal accent) */
.rwd-herobg { position: relative; width: 100%; overflow: hidden; isolation: isolate; min-height: 640px; display: flex; align-items: center;
  background:
    radial-gradient(120% 80% at 50% 4%, rgba(34,64,140,.4), transparent 60%),
    radial-gradient(90% 70% at 50% 100%, rgba(40,80,170,.32), transparent 66%),
    linear-gradient(180deg, #0a1330 0%, #070d22 46%, #060a18 100%); }
.rwd-herobg > * { position: relative; z-index: 2; width: 100%; }
.rwd-beams { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.rwd-beams span { position: absolute; }
/* starfield (matches site ambient) */
.rwd-stars { left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; pointer-events: none; opacity: .55;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 20%, #cfe0ff, transparent),
    radial-gradient(1.5px 1.5px at 26% 44%, #9fc3ff, transparent),
    radial-gradient(1px 1px at 40% 16%, #bcd4ff, transparent),
    radial-gradient(1.5px 1.5px at 58% 30%, #9fc3ff, transparent),
    radial-gradient(1px 1px at 70% 12%, #cfe0ff, transparent),
    radial-gradient(1.5px 1.5px at 84% 26%, #7fb0ff, transparent),
    radial-gradient(1px 1px at 92% 48%, #bcd4ff, transparent),
    radial-gradient(1px 1px at 33% 60%, #9fc3ff, transparent),
    radial-gradient(1px 1px at 78% 58%, #bcd4ff, transparent),
    radial-gradient(1.5px 1.5px at 18% 70%, #7fb0ff, transparent);
  background-repeat: no-repeat; animation: rwdTwinkle 4.5s ease-in-out infinite; }
@keyframes rwdTwinkle { 0%,100% { opacity: .35; } 50% { opacity: .62; } }
@media (prefers-reduced-motion: reduce) { .rwd-stars { animation: none; } }
/* upward light bloom rising from the horizon vertex */
.rwd-bloom { left: 50%; top: 82%; width: 1700px; height: 900px; transform: translate(-50%, -92%);
  background: radial-gradient(ellipse 42% 56% at 50% 100%, rgba(77,151,255,.5), rgba(60,120,230,0) 68%); filter: blur(6px); animation: rwdBreath 7s ease-in-out infinite; }
/* vertical light pillar shooting up from the vertex */
.rwd-pillar { left: 50%; top: 82%; width: 340px; height: 600px; transform: translate(-50%, -100%);
  background: radial-gradient(ellipse 50% 70% at 50% 100%, rgba(124,182,255,.45), rgba(124,182,255,0) 70%);
  filter: blur(22px); }
/* the two bright rays sloping down-outward from the center vertex */
.rwd-ray { left: 50%; top: 82%; height: 2px; width: 70%; transform-origin: 0 50%;
  background: linear-gradient(90deg, #cfe4ff, rgba(124,182,255,.85) 22%, rgba(124,182,255,0) 92%);
  box-shadow: 0 0 8px rgba(150,195,255,.95), 0 0 22px rgba(77,151,255,.7), 0 0 48px rgba(77,151,255,.4); }
.rwd-ray-l { transform: rotate(199deg); }
.rwd-ray-r { transform: rotate(-19deg); }
/* soft reflected glow under the rays */
.rwd-rayglow { left: 50%; top: 82%; width: 1500px; height: 340px; transform: translate(-50%, 0);
  background: radial-gradient(ellipse 50% 100% at 50% 0%, rgba(60,120,230,.26), transparent 72%); filter: blur(10px); }
/* central focal core — bright blue bloom with a small warm-gold heart (accent only) */
.rwd-core { left: 50%; top: 82%; width: 360px; height: 360px; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,233,168,.6) 0%, rgba(160,200,255,.5) 22%, rgba(77,151,255,.32) 44%, rgba(60,120,230,0) 72%);
  animation: rwdBreath 7s ease-in-out infinite; }
.rwd-vtx { left: 50%; top: 82%; width: 12px; height: 12px; transform: translate(-50%, -50%); border-radius: 50%;
  background: #fff4d6; box-shadow: 0 0 16px 5px rgba(255,233,168,.85), 0 0 46px 14px rgba(124,182,255,.6); }
@keyframes rwdBreath { 0%,100% { opacity: .82; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rwd-bloom, .rwd-core { animation: none; } }
.rwd-herobg::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 100% at 50% 38%, transparent 42%, rgba(6,10,24,.5) 100%), linear-gradient(0deg, #060a18 0%, transparent 22%); }
.rwd-gold-grad { background: linear-gradient(180deg, #ffe9a8, var(--gold)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 4px 20px rgba(242,193,78,.28)); }

/* shared reward card hover */
.rwd-float { transition: transform .4s cubic-bezier(.2,.8,.2,1), border-color .4s, box-shadow .4s; }
.rwd-float:hover { transform: translateY(-6px); border-color: rgba(255,255,255,.16); box-shadow: 0 28px 64px rgba(0,8,32,.5); }

/* 1) PRIZE POOL */
.rwd-pool { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; align-items: stretch; }
.rwd-pool-narr { position: relative; border-radius: 20px; padding: 30px 32px; overflow: hidden;
  background: rgba(255,255,255,.035); border: 1px solid var(--gl-border); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }
.rwd-pool-narr::before { content: none; }
.rwd-pool-head { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.rwd-pool-icon { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: var(--gold-bright); background: linear-gradient(160deg, var(--gold-soft), rgba(255,255,255,.02)); border: 1px solid var(--gold-line); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.rwd-pool-label { font-family: var(--tc-font-head); font-weight: 700; font-size: 13.5px; letter-spacing: 5px; text-transform: uppercase; color: var(--gold-bright); text-shadow: 0 0 18px rgba(245,183,64,.18); }
.rwd-pool-divider { position: relative; z-index: 1; height: 1px; margin: 18px 0 22px; background: rgba(255,255,255,.12); }
.rwd-pool-bar { position: relative; z-index: 1; height: 12px; border-radius: 999px; overflow: hidden;
  background: rgba(122,142,168,.36); box-shadow: inset 0 1px 4px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.05); }
.rwd-pool-bar .fill { display: block; position: absolute; inset: 0 auto 0 0; width: 95%; background: #69b6ff; border-radius: 999px 0 0 999px; }
.rwd-pool-bar .rake { display: block; position: absolute; inset: 0 0 0 auto; width: 5%; min-width: 24px; background: rgba(122,142,168,.68); border-left: 2px solid rgba(5,10,24,.95); border-radius: 0 999px 999px 0; }
.rwd-pool-split { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin-top: 20px; }
.rwd-pool-split span { display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--tc-font-body); font-weight: 500; font-size: 13.5px; color: var(--ink-3); }
.rwd-pool-split i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.34); box-shadow: 0 0 8px rgba(255,255,255,.16); }
.rwd-pool-split i.blue { background: #69b6ff; box-shadow: 0 0 10px rgba(105,182,255,.75); }
.rwd-pool-split b { font-family: var(--tc-font-display); font-weight: 800; font-size: 24px; line-height: 1; color: var(--ink); letter-spacing: .5px; }
.rwd-points { display: flex; flex-direction: column; gap: 12px; }
.rwd-point { position: relative; flex: 1; display: flex; gap: 14px; align-items: center; padding: 18px 20px; border-radius: 16px; background: var(--glass-2); border: 1px solid rgba(255,255,255,.08); }
.rwd-point .ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: 0 0 auto; color: var(--acc-bright); background: var(--acc-soft); border: 1px solid var(--acc-line); }
@media (max-width: 860px) { .rwd-pool { grid-template-columns: 1fr; } }

/* 2) EARN TC — numbered cards */
.rwd-earn { display: grid; grid-template-columns: repeat(12,1fr); gap: 16px; }
.rwd-earn-card { position: relative; grid-column: span 3; min-height: 220px; border-radius: 18px; padding: 22px 24px; overflow: hidden; background: var(--glass-2); border: 1px solid rgba(255,255,255,.08); }
.rwd-earn-card h4,
.rwd-earn-card p,
html[lang="zh-CN"] .rwd-earn-card.tcm-reveal > p { overflow-wrap: break-word; word-break: normal; line-break: auto; }
.rwd-earn-card:nth-child(5) { grid-column: 3 / span 3; }
.rwd-earn-num { position: absolute; top: 16px; right: 20px; font-family: var(--tc-font-display); font-weight: 800; font-size: 40px; line-height: 1; color: rgba(198,216,255,.08); pointer-events: none; }
.rwd-earn-ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: var(--acc-bright); background: linear-gradient(160deg, var(--acc-soft), rgba(255,255,255,.015)); border: 1px solid var(--acc-line); margin-bottom: 16px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); transition: transform .35s var(--tc-ease); }
.rwd-earn-card:hover .rwd-earn-ic { transform: translateY(-2px) scale(1.06); }
@media (max-width: 920px) {
  .rwd-earn { grid-template-columns: 1fr 1fr; }
  .rwd-earn-card { grid-column: auto; }
  .rwd-earn-card:nth-child(5) { grid-column: auto; }
}
@media (max-width: 520px) { .rwd-earn { grid-template-columns: 1fr; } }

/* 3) NINE-TAIL FOX LADDER */
.rwd-boost { display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px; border-radius: 999px; font-family: var(--tc-font-head); font-weight: 700; font-size: 15px; color: var(--gold-bright);
  background: linear-gradient(160deg, var(--gold-soft), rgba(255,255,255,.02)); border: 1px solid var(--gold-line); box-shadow: 0 8px 26px rgba(180,130,30,.22), inset 0 1px 0 rgba(255,255,255,.1); }
.rwd-ladder-wrap { position: relative; overflow-x: visible; padding: 8px 2px 14px; -webkit-overflow-scrolling: touch; }
.rwd-ladder { position: relative; display: grid; grid-template-columns: repeat(9, minmax(94px, 1fr)); gap: 12px; min-width: 760px; }
.rwd-ladder::before { content: ""; position: absolute; left: 5%; right: 11%; top: 31px; height: 2px; z-index: 0; background: linear-gradient(90deg, var(--acc-line) 0%, var(--acc-line) 55%, var(--gold-line) 100%); }
.rwd-tier { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.rwd-tier-node { width: 66px; height: 66px; display: grid; place-items: center; overflow: visible;
  transition: transform .35s var(--tc-ease); }
.rwd-tier:hover .rwd-tier-node { transform: translateY(-4px) scale(1.07); }
.rwd-tier.peak .rwd-tier-node { width: 92px; height: 92px; margin-top: -14px; }
.rwd-foximg { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 4px 12px rgba(60,130,255,.4)); }
.rwd-tier.peak .rwd-foximg { filter: drop-shadow(0 6px 18px rgba(95,140,255,.55)); animation: rwdFoxFloat 5s ease-in-out infinite; }
@keyframes rwdFoxFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) { .rwd-tier.peak .rwd-foximg { animation: none; } }
.rwd-tier-zh { font-family: var(--tc-font-head); font-weight: 600; font-size: 13.5px; color: var(--ink); }
.rwd-tier.gold .rwd-tier-zh { color: var(--gold-bright); }
.rwd-tier-en { font-family: var(--tc-font-body); font-weight: 500; font-size: 10.5px; line-height: 1.3; color: var(--ink-3); }
.rwd-perks { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.rwd-perk { display: flex; gap: 13px; align-items: flex-start; padding: 18px 20px; border-radius: 16px; background: var(--glass-2); border: 1px solid rgba(255,255,255,.08); }
.rwd-perk .ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: 0 0 auto; color: var(--gold-bright); background: var(--gold-soft); border: 1px solid var(--gold-line); }
@media (max-width: 760px) { .rwd-perks { grid-template-columns: 1fr; } }

/* 4) NFT achievements */
.rwd-nft { display: grid; grid-template-columns: 1.25fr 1fr; gap: 34px; align-items: center; border-radius: 22px; padding: clamp(28px,3.4vw,46px);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.014)); border: 1px solid var(--gl-border); box-shadow: 0 24px 64px rgba(0,6,26,.45), inset 0 1px 0 rgba(255,255,255,.1); }
.rwd-badges { display: flex; flex-direction: column; gap: 12px; }
.rwd-badge { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 14px; background: var(--glass-2); border: 1px solid rgba(255,255,255,.08); transition: transform .35s var(--tc-ease), border-color .35s, box-shadow .35s; }
.rwd-badge:hover { transform: translateX(4px); border-color: var(--gold-line); box-shadow: 0 14px 34px rgba(120,90,20,.26); }
.rwd-badge-medal { width: 56px; height: 56px; display: grid; place-items: center; flex: 0 0 auto; overflow: visible;
  filter: drop-shadow(0 4px 12px rgba(200,150,40,.35)); transition: transform .3s var(--tc-ease); }
.rwd-badge:hover .rwd-badge-medal { transform: translateY(-3px) scale(1.06); }
@media (max-width: 820px) { .rwd-nft { grid-template-columns: 1fr; gap: 26px; } }

/* 4b) NFT achievement grid (19 streak badges) */
.rwd-nft-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 36px; }
.rwd-nft-card { position: relative; display: flex; align-items: center; gap: 15px; padding: 16px 56px 16px 16px; border-radius: 16px;
  background: var(--glass-2); border: 1px solid rgba(255,255,255,.08); transition: transform .35s var(--tc-ease), border-color .35s var(--tc-ease), box-shadow .35s var(--tc-ease); }
.rwd-nft-card:hover { transform: translateY(-3px); border-color: var(--gold-line); box-shadow: 0 16px 38px rgba(120,90,20,.24); }
.rwd-nft-medal { width: 52px; height: 52px; flex: 0 0 auto; display: grid; place-items: center; overflow: visible;
  filter: drop-shadow(0 4px 12px rgba(200,150,40,.32)); transition: transform .3s var(--tc-ease); }
.rwd-nft-card:hover .rwd-nft-medal { transform: translateY(-2px) scale(1.07); }
.rwd-nft-medal.ph { border-radius: 50%; color: rgba(210,225,255,.5); background: radial-gradient(circle at 36% 30%, rgba(120,160,235,.22), rgba(255,255,255,.02) 70%);
  border: 1px dashed rgba(150,180,255,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); filter: none; }
.rwd-nft-meta { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rwd-nft-name { font-family: var(--tc-font-head); font-weight: 600; font-size: 16px; color: var(--ink); line-height: 1.2; }
.rwd-nft-sub { font-family: var(--tc-font-body); font-weight: 500; font-size: 12px; color: var(--ink-3); line-height: 1.3; }
.rwd-nft-val { position: absolute; top: 14px; right: 14px; font-family: var(--tc-font-display); font-weight: 700; font-size: 12.5px;
  padding: 3px 9px; border-radius: 999px; color: #ffd97a; background: rgba(180,130,30,.16); border: 1px solid var(--gold-line); letter-spacing: .3px; }
@media (max-width: 900px) { .rwd-nft-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .rwd-nft-grid { grid-template-columns: 1fr; } }

/* CTA band */
.rwd-cta { position: relative; overflow: hidden; border-radius: 26px; padding: clamp(36px,5vw,64px); text-align: center;
  background: linear-gradient(165deg, var(--gold-soft), rgba(255,255,255,.02)); border: 1px solid var(--gl-border); box-shadow: 0 28px 70px rgba(0,6,26,.5), inset 0 1px 0 rgba(255,255,255,.12); }
.rwd-cta::before { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; right: -160px; top: -220px; background: radial-gradient(circle, var(--gold-soft), transparent 70%); filter: blur(46px); pointer-events: none; }
.rwd-cta::after { content: ""; position: absolute; width: 380px; height: 380px; border-radius: 50%; left: -130px; bottom: -200px; background: radial-gradient(circle, var(--acc-soft), transparent 70%); filter: blur(46px); pointer-events: none; }

/* ============================================================
   SUPPORT — risk disclosure (numbered cards)
   ============================================================ */
.sup-risk-statement { display: flex; gap: 16px; align-items: flex-start; padding: 22px 26px; border-radius: 18px; margin: 0 auto 22px; max-width: 1100px;
  background: linear-gradient(160deg, var(--acc-soft), rgba(255,255,255,.015)); border: 1px solid var(--acc-line); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.sup-risk-statement .ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto; color: var(--acc-bright); background: rgba(77,151,255,.16); border: 1px solid var(--acc-line); }
.sup-risk-statement p { font-family: var(--tc-font-body); font-weight: 600; font-size: 14.5px; line-height: 1.66; color: var(--ink); margin: 0; align-self: center; text-wrap: pretty; }
.sup-riskgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; max-width: 1100px; margin: 0 auto; }
.sup-riskcard { position: relative; border-radius: 16px; padding: 22px 22px 24px; background: var(--glass-2); border: 1px solid rgba(255,255,255,.08); overflow: hidden; }
.sup-riskcard::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--acc), transparent); opacity: .45; transition: opacity .4s; }
.sup-riskcard:hover::before { opacity: 1; }
.sup-risk-n { font-family: var(--tc-font-display); font-weight: 800; font-size: 20px; line-height: 1; letter-spacing: .5px; margin-bottom: 12px; display: inline-block;
  background: linear-gradient(165deg, #ffffff 26%, #aecbff 80%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 8px rgba(120,170,255,.26)); }
.sup-risk-t { font-family: var(--tc-font-head); font-weight: 600; font-size: 15.5px; color: var(--ink); margin: 0 0 6px; }
.sup-risk-d { font-family: var(--tc-font-body); font-weight: 500; font-size: 13px; line-height: 1.55; color: var(--ink-2); margin: 0; text-wrap: pretty; }
@media (max-width: 920px) { .sup-riskgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .sup-riskgrid { grid-template-columns: 1fr; } }

/* ============================================================
   TC Token page — dynamic "data-alive" effects
   ============================================================ */

/* hero "TC" — slow light sweep across the gradient text (5.5s) */
@keyframes tokShimmer { 0% { background-position: 130% 0; } 100% { background-position: -130% 0; } }
.tok-shimmer { animation: tokShimmer 5.5s cubic-bezier(.25,.46,.45,.94) infinite; }

/* allocation bars — fill out from 0 the first time the panel reveals.
   Overrides the static width on line ~312; the .in state sets the real width. */
.tok-bar > i { width: 0; transition: width 1.15s cubic-bezier(.25,.46,.45,.94); }
.tcm-reveal.in .tok-bar > i { width: var(--w, 40%); }
.tcm-reveal.in .tok-alloc:nth-of-type(2) .tok-bar > i { transition-delay: .08s; }
.tcm-reveal.in .tok-alloc:nth-of-type(3) .tok-bar > i { transition-delay: .16s; }
.tcm-reveal.in .tok-alloc:nth-of-type(4) .tok-bar > i { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  .tok-shimmer { animation: none; }
  .tok-bar > i { transition: none; width: var(--w, 40%); }
}

/* ============================================================
   Homepage middle island — redesigned editorial modules
   (Pain / Engines / Fairness)
   ============================================================ */
.tcm-split { display: grid; grid-template-columns: minmax(0,1.02fr) minmax(0,.98fr); gap: clamp(32px,5vw,64px); align-items: center; }

/* ---- fairness bento (5 cards + 1 emblem tile) ---- */
.tcm-fairbento { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; max-width: 1080px; margin: 0 auto; }
.fair-card { position: relative; overflow: hidden; border-radius: 18px; padding: 22px 22px 20px; display: flex; flex-direction: column; transition: transform .35s var(--tc-ease), border-color .35s ease, box-shadow .35s ease; }
.fair-card:hover { transform: translateY(-4px); border-color: rgba(95,200,255,.3); box-shadow: 0 18px 44px rgba(8,24,72,.32); }
.fair-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s ease; background: radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(120,180,255,.1), transparent 45%); }
.fair-card:hover::after { opacity: 1; }
/* fairness 3D icon: gentle float + glow pulse, staggered */
@keyframes fairFloat { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-7px) rotate(-1.5deg); } }
@keyframes fairGlow { 0%,100% { filter: drop-shadow(0 4px 12px rgba(60,130,255,.3)); } 50% { filter: drop-shadow(0 8px 20px rgba(95,170,255,.55)); } }
.fair-ico { animation: fairFloat 5s ease-in-out infinite, fairGlow 5s ease-in-out infinite; }
.tcm-fairbento > .fair-card:nth-of-type(1) .fair-ico { animation-delay: 0s, 0s; }
.tcm-fairbento > .fair-card:nth-of-type(3) .fair-ico { animation-delay: .6s, .6s; }
.tcm-fairbento > .fair-card:nth-of-type(4) .fair-ico { animation-delay: 1.2s, 1.2s; }
.tcm-fairbento > .fair-card:nth-of-type(5) .fair-ico { animation-delay: 1.8s, 1.8s; }
.tcm-fairbento > .fair-card:nth-of-type(6) .fair-ico { animation-delay: 2.4s, 2.4s; }
.fair-card:hover .fair-ico { animation-play-state: paused; transform: translateY(-7px) scale(1.08); transition: transform .35s var(--tc-ease); }
@media (prefers-reduced-motion: reduce) { .fair-ico { animation: none; } }
.fair-feat { background: radial-gradient(120% 100% at 50% 22%, rgba(46,86,176,.3), rgba(10,18,40,.5) 70%); border: 1px solid rgba(95,200,255,.26); }
@media (max-width: 860px) { .tcm-fairbento { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .tcm-fairbento { grid-template-columns: 1fr; } }

/* ---- token utility: editorial value-loop ledger ---- */
.tok-util { display: grid; grid-template-columns: 1.18fr .82fr; gap: clamp(22px,3vw,40px); align-items: stretch; }
.tok-ledger { position: relative; }
.tok-lrow { position: relative; display: grid; grid-template-columns: 60px 1fr; gap: 22px; padding: 24px 0; }
.tok-lrow:not(:last-child) { border-bottom: 1px solid rgba(255,255,255,.06); }
.tok-lmed { position: relative; z-index: 1; width: 60px; height: 60px; border-radius: 17px; display: grid; place-items: center; color: var(--acc-bright); background: linear-gradient(150deg, rgba(95,200,255,.17), rgba(95,200,255,.03)); border: 1px solid rgba(95,200,255,.26); box-shadow: 0 0 22px rgba(95,200,255,.14), inset 0 1px 0 rgba(255,255,255,.12); transition: transform .35s var(--tc-ease), box-shadow .35s ease; }
.tok-lrow:hover .tok-lmed { transform: translateY(-3px) scale(1.05); box-shadow: 0 0 32px rgba(95,200,255,.32), inset 0 1px 0 rgba(255,255,255,.14); }
.tok-util-feat { position: relative; overflow: hidden; border-radius: 20px; background: radial-gradient(110% 90% at 50% 18%, rgba(46,86,176,.32), rgba(10,18,40,.5) 70%); border: 1px solid rgba(95,200,255,.24); display: flex; align-items: center; justify-content: center; padding: 28px; min-height: 320px; }
@media (max-width: 860px) { .tok-util { grid-template-columns: 1fr; } .tok-util-feat { min-height: 200px; order: -1; } }

/* ---- buyback: on-chain flow rail ---- */
.tok-feat-banner { position: relative; overflow: hidden; border-radius: 18px; min-height: 188px; display: grid; grid-template-columns: 1fr 1.06fr; align-items: center; gap: clamp(16px,2.5vw,36px); padding: 26px clamp(24px,4vw,54px); background: radial-gradient(40% 120% at 13% 50%, rgba(70,120,230,.24), transparent 70%), radial-gradient(42% 120% at 87% 50%, rgba(125,82,235,.22), transparent 70%), radial-gradient(54% 130% at 50% 52%, rgba(86,150,240,.16), transparent 72%), linear-gradient(180deg, rgba(13,21,46,.72), rgba(5,9,24,.84)); border: 1px solid rgba(95,170,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 -30px 60px rgba(5,9,22,.55); margin-bottom: 20px; }
.tok-feat-text { position: relative; z-index: 2; max-width: 520px; }
.tok-feat-kicker { display: inline-block; font-family: var(--tc-font-display); font-weight: 700; font-size: clamp(15px,1.5vw,19px); letter-spacing: .5px; color: #cfe3ff; margin-bottom: 9px; text-shadow: 0 2px 16px rgba(60,130,255,.4); }
.tok-feat-sum { font-family: var(--tc-font-body); font-weight: 500; font-size: 13.6px; line-height: 1.62; color: var(--ink-2); margin: 0; text-wrap: pretty; }
.tok-feat-imgwrap { position: relative; align-self: stretch; }
.tok-feat-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; transform: scale(1.18); -webkit-mask-image: radial-gradient(72% 82% at 52% 50%, #000 52%, transparent 92%); mask-image: radial-gradient(72% 82% at 52% 50%, #000 52%, transparent 92%); z-index: 1; pointer-events: none; }
@media (max-width: 720px) { .tok-feat-banner { grid-template-columns: 1fr; min-height: 0; padding: 24px 22px; text-align: center; } .tok-feat-text { max-width: none; } .tok-feat-imgwrap { height: 130px; } }
.tok-feat-banner::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-repeat: no-repeat; background-image: radial-gradient(1px 1px at 5% 32%, rgba(255,255,255,.85), transparent), radial-gradient(1px 1px at 11% 68%, rgba(190,215,255,.75), transparent), radial-gradient(1.4px 1.4px at 18% 22%, rgba(255,255,255,.7), transparent), radial-gradient(1px 1px at 24% 56%, rgba(255,255,255,.6), transparent), radial-gradient(1px 1px at 31% 38%, rgba(185,212,255,.7), transparent), radial-gradient(1px 1px at 16% 84%, rgba(255,255,255,.55), transparent), radial-gradient(1px 1px at 69% 34%, rgba(255,255,255,.78), transparent), radial-gradient(1.4px 1.4px at 77% 66%, rgba(212,226,255,.78), transparent), radial-gradient(1px 1px at 83% 26%, rgba(255,255,255,.68), transparent), radial-gradient(1px 1px at 90% 56%, rgba(190,215,255,.68), transparent), radial-gradient(1px 1px at 95% 40%, rgba(255,255,255,.6), transparent), radial-gradient(1px 1px at 86% 82%, rgba(255,255,255,.5), transparent); }
.tok-feat-banner::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-repeat: no-repeat; background-image: radial-gradient(1.6px 1.6px at 9% 50%, #fff, transparent), radial-gradient(2px 2px at 29% 76%, #cfe2ff, transparent), radial-gradient(1.6px 1.6px at 73% 18%, #fff, transparent), radial-gradient(2px 2px at 88% 74%, #cfe2ff, transparent), radial-gradient(1.6px 1.6px at 96% 60%, #fff, transparent), radial-gradient(1.6px 1.6px at 40% 24%, #e8f1ff, transparent); animation: tokStarTwinkle 3.6s ease-in-out infinite; }
@keyframes tokStarTwinkle { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tok-feat-banner::after { animation: none; } }
.tok-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; }
.tok-stage { position: relative; overflow: hidden; padding: 26px 24px; border-radius: 16px; background: var(--glass-2); border: 1px solid rgba(255,255,255,.08); transition: transform .35s var(--tc-ease), border-color .35s; }
.tok-stage:hover { transform: translateY(-4px); border-color: rgba(95,200,255,.3); }
.tok-flowarr { display: grid; place-items: center; padding: 0 12px; color: var(--acc-bright); }
.tok-flowarr svg { animation: howArrowFlow 2.4s ease-in-out infinite; }
.tok-flowarr:nth-of-type(4) svg { animation-delay: .4s; }
@media (max-width: 820px) { .tok-flow { grid-template-columns: 1fr; gap: 14px; } .tok-flowarr { transform: rotate(90deg); padding: 4px 0; } }

/* ---- governance: lifecycle rail ---- */
.tok-gov-rail { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 16px; }
.tok-gov-rail::before { content: ""; position: absolute; left: 26px; right: 26px; top: 26px; height: 2px; background: linear-gradient(90deg, transparent, rgba(95,200,255,.42) 10%, rgba(95,200,255,.42) 90%, transparent); }
.tok-gov-node { position: relative; z-index: 1; width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; font-family: var(--tc-font-display); font-weight: 800; font-size: 15px; letter-spacing: 0; color: var(--acc-bright); background: linear-gradient(155deg, rgba(60,120,210,.45), rgba(10,18,40,.96)); border: 1px solid rgba(95,200,255,.32); box-shadow: 0 0 20px rgba(95,200,255,.2); margin-bottom: 16px; transition: transform .35s var(--tc-ease), box-shadow .35s; }
.tok-gov-stage:hover .tok-gov-node { transform: translateY(-3px); box-shadow: 0 0 30px rgba(95,200,255,.36); }
@media (max-width: 760px) { .tok-gov-rail { grid-auto-flow: row; } .tok-gov-rail::before { display: none; } }

/* ---- governance authority panels + treasury ---- */
.gov-auth { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 760px) { .gov-auth { grid-template-columns: 1fr; } }
.gov-panel { position: relative; overflow: hidden; border-radius: 18px; padding: 24px 26px 12px; background: var(--glass-2); border: 1px solid rgba(255,255,255,.08); }
.gov-panel.is-open { border-color: rgba(58,200,150,.26); }
.gov-panel.is-open::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(58,210,150,.65), transparent); }
.gov-panel.is-locked::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(150,170,210,.4), transparent); }
.gov-phead { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; margin-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.07); }
.gov-pbadge { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center; }
.gov-prow { display: flex; align-items: center; gap: 13px; padding: 13px 0; border-top: 1px solid rgba(255,255,255,.05); transition: padding-left .3s var(--tc-ease); }
.gov-prow:first-of-type { border-top: none; }
.gov-prow:hover { padding-left: 5px; }
.gov-pchip { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 8px; display: grid; place-items: center; }
.gov-ptag { margin-left: auto; font-family: var(--tc-font-head); font-weight: 600; font-size: 10.5px; letter-spacing: .4px; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }

.gov-treasury { position: relative; overflow: hidden; border-radius: 20px; background: var(--glass-2); border: 1px solid rgba(95,200,255,.2); display: grid; grid-template-columns: 200px 1fr; align-items: stretch; }
@media (max-width: 720px) { .gov-treasury { grid-template-columns: 1fr; } }

/* ---- about: token passport ---- */
.tok-passport { position: relative; overflow: hidden; border-radius: 22px; background: var(--glass-2); border: 1px solid rgba(95,200,255,.2); display: grid; grid-template-columns: 300px 1fr; gap: 0; margin-bottom: 16px; }
@media (max-width: 760px) { .tok-passport { grid-template-columns: 1fr; } }
.tok-pp-emblem { position: relative; display: grid; place-items: center; min-height: 280px; background: radial-gradient(115% 110% at 50% 16%, rgba(46,86,176,.36), rgba(10,18,40,.5) 70%); border-right: 1px solid rgba(255,255,255,.07); }
@media (max-width: 760px) { .tok-pp-emblem { border-right: none; border-bottom: 1px solid rgba(255,255,255,.07); min-height: 200px; } }
.tok-pp-body { padding: clamp(26px,3vw,38px); display: flex; flex-direction: column; justify-content: center; }
.tok-pp-spec { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 24px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.07); border-radius: 14px; overflow: hidden; }
.tok-pp-cell { background: rgba(13,21,46,.7); padding: 15px 18px; }
.tok-roles { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
@media (max-width: 900px) { .tok-roles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .tok-roles { grid-template-columns: 1fr; } }
.tok-role { position: relative; overflow: hidden; border-radius: 16px; padding: 22px 20px; background: var(--glass-2); border: 1px solid rgba(255,255,255,.08); transition: transform .35s var(--tc-ease), border-color .35s, box-shadow .35s; }
.tok-role:hover { transform: translateY(-4px); border-color: rgba(95,200,255,.3); box-shadow: 0 16px 40px rgba(8,24,72,.3); }
.tok-role::after { content: ""; position: absolute; top: -40px; right: -40px; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle, rgba(95,170,255,.14), transparent 70%); pointer-events: none; }
.gov-tr-emblem { position: relative; display: grid; place-items: center; min-height: 150px; background: radial-gradient(120% 120% at 50% 16%, rgba(46,86,176,.36), rgba(10,18,40,.5) 70%); border-right: 1px solid rgba(255,255,255,.07); }
@media (max-width: 720px) { .gov-tr-emblem { border-right: none; border-bottom: 1px solid rgba(255,255,255,.07); } }
.gov-tr-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.05); }
.gov-tr-seg { height: 100%; transition: flex-grow .6s var(--tc-ease); }
.gov-tr-leg { display: flex; flex-wrap: wrap; gap: 16px 22px; margin-top: 16px; }
.gov-tr-legitem { display: flex; align-items: center; gap: 9px; }
.gov-tr-dot { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; }
@media (max-width: 880px) {
  .tcm-split { grid-template-columns: 1fr; gap: 34px; }
  .tcm-split .tcm-split-img { order: -1; width: 100%; max-width: 460px; margin: 0 auto; }
}

.tcm-painlist > div { border-top: 1px solid rgba(255,255,255,.07); }
.tcm-painlist > div:first-child { border-top: none; }

.tcm-checklist > div { border-top: 1px solid rgba(255,255,255,.07); }
.tcm-checklist > div:first-child { border-top: none; }

.tcm-engines { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; align-items: stretch; }
.tcm-engines > div { display: flex; flex-direction: column; }
.tcm-engines > div > .eng-flow-track { margin-top: auto; }
@media (max-width: 820px) { .tcm-engines { grid-template-columns: 1fr; gap: 14px; } }

.tcm-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .tcm-vs { grid-template-columns: 1fr; } }

@keyframes engFlow { 0% { transform: translateX(-110%); } 100% { transform: translateX(330%); } }
.eng-flow-track { position: relative; height: 2px; border-radius: 2px; background: rgba(95,200,255,.14); overflow: hidden; }
.eng-flow-track > i { position: absolute; inset: 0 auto 0 0; height: 100%; width: 32%; border-radius: 2px; background: linear-gradient(90deg, transparent, #5fc8ff, transparent); animation: engFlow 2.8s ease-in-out infinite; }
.tcm-engines > div:nth-child(2) .eng-flow-track > i { animation-delay: .5s; }
.tcm-engines > div:nth-child(3) .eng-flow-track > i { animation-delay: 1s; }
@media (prefers-reduced-motion: reduce) { .eng-flow-track > i { animation: none; width: 46%; } }

.tcm-painrow { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; max-width: 1040px; margin: 0 auto; }
@media (max-width: 760px) { .tcm-painrow { grid-template-columns: 1fr; gap: 14px; max-width: 430px; } }
.pain-card { transition: transform .35s cubic-bezier(.25,.46,.45,.94), border-color .35s ease, box-shadow .35s ease; }
.pain-card:hover { transform: translateY(-4px); border-color: rgba(95,200,255,.3); box-shadow: 0 18px 44px rgba(8,24,72,.3), inset 0 1px 0 rgba(255,255,255,.08); }
.pain-card:hover .pain-vis-glow { opacity: 1; transform: scale(1.12); }
/* pointer-tracked spotlight */
.pain-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s ease; background: radial-gradient(280px circle at var(--mx,50%) var(--my,50%), rgba(120,180,255,.12), transparent 45%); }
.pain-card:hover::after { opacity: 1; }
/* number reacts to hover */
.pain-stat { transition: text-shadow .35s ease, letter-spacing .35s ease; }
.pain-card:hover .pain-stat { text-shadow: 0 0 26px rgba(95,170,255,.75); }
.pain-card:hover .pain-tag { border-color: rgba(95,200,255,.4); background: rgba(95,200,255,.14); }
.pain-tag { transition: border-color .3s ease, background .3s ease; }
/* staggered entrance for the three cards */
.tcm-painrow > .tcm-reveal { transition-delay: var(--d, 0s); }
@keyframes painPulse { 0%,100% { opacity: .5; transform: scale(1); } 50% { opacity: .9; transform: scale(1.1); } }
.pain-glow { animation: painPulse 6.5s ease-in-out infinite; }
.pain-vis-glow { transition: opacity .45s ease, transform .45s ease; }
@media (prefers-reduced-motion: reduce) { .pain-glow { animation: none; } }

/* ---- pain sub-block header (unified with other modules) ---- */
.pain-sub { display: flex; flex-direction: column; gap: 10px; margin: 60px auto 22px; max-width: 1040px; }
.pain-sub .eb { display: inline-flex; align-items: center; gap: 10px; font-family: var(--tc-font-display); font-weight: 700; font-size: 12.5px; letter-spacing: 1.5px; color: var(--acc-bright); }
.pain-sub .eb::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--acc-bright), transparent); }
.pain-sub h3 { font-family: var(--tc-font-head); font-weight: 600; font-size: clamp(20px,2.4vw,28px); line-height: 1.18; letter-spacing: -.3px; color: var(--ink); margin: 0; text-wrap: balance; }
.pain-sub p { font-family: var(--tc-font-body); font-weight: 500; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); margin: 0; max-width: 720px; text-wrap: pretty; }

/* ---- 3.2 death-spiral block ---- */
.pain-spiral { display: grid; grid-template-columns: 1.05fr .95fr; gap: 22px; max-width: 1040px; margin: 0 auto; align-items: stretch; }
@media (max-width: 860px) { .pain-spiral { grid-template-columns: 1fr; } }
.pain-statgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 16px; }
.pain-statcell { padding: 16px 16px 14px; border-radius: 14px; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.07); }
.pain-statcell b { display: block; font-family: var(--tc-font-display); font-weight: 800; font-size: clamp(22px,3vw,30px); line-height: 1; letter-spacing: -1px; color: var(--ink); text-shadow: 0 0 20px rgba(95,170,255,.4); }
.pain-statcell span { display: block; margin-top: 7px; font-family: var(--tc-font-head); font-weight: 600; font-size: 11.5px; line-height: 1.35; color: var(--ink-3); }
.pain-flaw { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 11px; background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.06); font-family: var(--tc-font-head); font-weight: 600; font-size: 13.5px; color: var(--ink-2); }
.pain-flaw i { width: 7px; height: 7px; border-radius: 2px; background: #ff6b6b; box-shadow: 0 0 9px rgba(255,107,107,.6); flex: 0 0 auto; transform: rotate(45deg); }
/* spiral diagram */
.pain-spiralviz { position: relative; border-radius: 18px; overflow: hidden; background: radial-gradient(120% 100% at 70% 18%, rgba(120,40,60,.22), rgba(10,16,38,.5) 68%); border: 1px solid rgba(255,255,255,.07); display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 26px 24px; min-height: 300px; }
.pain-spiralviz .sp-glow { position: absolute; bottom: -60px; left: 50%; transform: translateX(-50%); width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(255,90,120,.28), rgba(255,90,120,0) 66%); pointer-events: none; }
.sp-step { position: relative; display: flex; align-items: center; gap: 13px; padding: 12px 16px; border-radius: 12px; background: linear-gradient(100deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border: 1px solid rgba(255,255,255,.08); font-family: var(--tc-font-head); font-weight: 600; font-size: 14px; color: var(--ink); opacity: 0; transform: translateY(12px); }
.pain-spiralviz.in .sp-step { animation: spStepIn .5s var(--tc-ease) forwards; }
.pain-spiralviz.in .sp-step:nth-child(2) { animation-delay: .05s; }
.pain-spiralviz.in .sp-step:nth-child(3) { animation-delay: .25s; }
.pain-spiralviz.in .sp-step:nth-child(4) { animation-delay: .45s; }
.pain-spiralviz.in .sp-step:nth-child(5) { animation-delay: .65s; }
@keyframes spStepIn { to { opacity: 1; transform: translateY(0); } }
.sp-step .sp-n { width: 24px; height: 24px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; font-family: var(--tc-font-display); font-weight: 800; font-size: 12px; color: #ffd0d8; background: rgba(255,90,120,.16); border: 1px solid rgba(255,90,120,.3); }
.sp-step .sp-ar { margin-left: auto; color: rgba(255,120,140,.7); display: grid; flex: 0 0 auto; }
.sp-step:nth-child(2) { margin-left: 0; }
.sp-step:nth-child(3) { margin-left: 18px; }
.sp-step:nth-child(4) { margin-left: 36px; }
.sp-step:nth-child(5) { margin-left: 54px; }
.pain-spnote { display: flex; align-items: center; gap: 9px; margin-top: 16px; padding: 11px 15px; border-radius: 11px; background: rgba(255,90,120,.07); border: 1px solid rgba(255,90,120,.18); font-family: var(--tc-font-body); font-weight: 600; font-size: 13px; color: #ffb3bf; }

/* ---- 3.3 competitor gap table ---- */
.pain-table { max-width: 1040px; margin: 0 auto; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); background: var(--glass-2); }
.pain-trow { display: grid; grid-template-columns: 280px 1fr; align-items: center; gap: 18px; padding: 18px 26px; border-top: 1px solid rgba(255,255,255,.06); transition: background .2s; }
.pain-trow:first-child { border-top: none; }
.pain-trow.head { background: rgba(255,255,255,.03); }
.pain-trow.head span { font-family: var(--tc-font-head); font-weight: 700; font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink-3); }
.pain-trow .nm { display: inline-flex; align-items: center; gap: 11px; font-family: var(--tc-font-head); font-weight: 700; font-size: 16px; color: var(--ink); }
.pain-trow .nm i { width: 8px; height: 8px; border-radius: 50%; background: #ff6b6b; box-shadow: 0 0 9px rgba(255,107,107,.55); flex: 0 0 auto; }
.pain-trow .wk { font-family: var(--tc-font-body); font-weight: 500; font-size: 14px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.pain-trow:not(.head):hover { background: rgba(255,90,120,.05); }
@media (max-width: 680px) { .pain-trow { grid-template-columns: 1fr; gap: 7px; } .pain-trow.head { display: none; } }