/* ChartIQ — landing */
.hero { position: relative; padding-block: calc(var(--nav-h) + clamp(28px, 6vw, 72px)) clamp(40px, 6vw, 80px); overflow: clip; isolation: isolate; }
.hero__bg { position: absolute; inset: 0; z-index: -1; }
.hero__bg .grid { position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(70% 60% at 50% 30%, #000 20%, transparent 75%); }
.glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: var(--glow-o); }
.glow--a { inline-size: 560px; block-size: 560px; inset-block-start: -120px; inset-inline-end: -120px; background: radial-gradient(closest-side, rgba(var(--brand-rgb), .32), transparent); }
.glow--b { inline-size: 480px; block-size: 480px; inset-block-start: 200px; inset-inline-start: -200px; background: radial-gradient(closest-side, rgba(var(--info-rgb), .2), transparent); }
.hero__in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--ov-1); font: 500 12.5px/1 var(--f-mono); color: var(--text-2); }
.dot { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--up); animation: ping 2.4s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(18, 185, 129, .55); } 80%, 100% { box-shadow: 0 0 0 9px rgba(18, 185, 129, 0); } }
.hero__title { margin-block: 22px 20px; font-size: clamp(2.5rem, 6vw, 4.6rem); font-weight: 800; line-height: 1.02; letter-spacing: -.04em; background: linear-gradient(180deg, var(--title-a) 20%, var(--title-b) 130%); -webkit-background-clip: text; background-clip: text; color: transparent; text-wrap: balance; }
.lede { max-inline-size: 52ch; color: var(--text-2); font-size: clamp(1.02rem, 1.5vw, 1.18rem); line-height: 1.65; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-block: 30px 24px; }
.trust { display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--text-3); font-size: 13.5px; }
.trust li { display: inline-flex; align-items: center; gap: 8px; }
.trust li::before { content: ""; inline-size: 14px; block-size: 14px; background: var(--up); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 8.500 3.200 3.200L13 4.500' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }

.demo { overflow: clip; box-shadow: var(--card-shadow), 0 40px 80px -40px rgba(var(--brand-rgb), .5); transform: perspective(1400px) rotateY(-4deg) rotateX(2deg); transition: transform 500ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .demo:hover { transform: none; } }
.demo__bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-block-end: 1px solid var(--line); font-size: 12.5px; }
.mystery { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 99px; background: rgba(var(--brand-rgb), .1); color: var(--brand-ink); font-weight: 600; font-size: 12.5px; }
.mystery svg { inline-size: 14px; block-size: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.demo__canvas { position: relative; block-size: clamp(240px, 34vw, 340px); background: var(--chart-bg); }
#demoChart { display: block; inline-size: 100%; block-size: 100%; }
.demo__fallback { position: absolute; inset: 0; display: grid; align-content: center; gap: 14px; padding: 10%; background: var(--chart-bg); }
.demo__fallback[hidden] { display: none; }
.demo__foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-block-start: 1px solid var(--line); font-size: 12.5px; }
.demo__btn { padding: 7px 14px; border-radius: 9px; color: #fff; font-weight: 600; font-size: 13px; }
.demo__btn--buy { background: #0e9f6e; } .demo__btn--sell { background: #d92d3a; }
.demo__foot .dim { margin-inline-start: auto; text-align: end; }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 16px; counter-reset: s; }
.step { position: relative; padding: 24px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--card-shadow); }
.step svg { inline-size: 40px; block-size: 40px; fill: none; stroke: var(--brand-ink); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; margin-block-end: 16px; }
.step__n { position: absolute; inset-block-start: 20px; inset-inline-end: 22px; font: 700 13px var(--f-mono); color: var(--text-3); }
.step h3 { font-size: 1.2rem; margin-block-end: 8px; } .step p { color: var(--text-2); font-size: 15px; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.split .sec__head { margin: 0; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.facts { display: grid; gap: 10px; }
.facts li { display: grid; gap: 3px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.facts b { font-size: 15.5px; } .facts span { color: var(--text-2); font-size: 14.5px; }

.scorebox { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; align-items: center; }
@media (max-width: 860px) { .scorebox { grid-template-columns: 1fr; } }
.scale { padding: 24px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--card-shadow); display: grid; gap: 14px; }
.scale__bar { position: relative; block-size: 12px; border-radius: 99px; background: linear-gradient(90deg, #f0475a, #f59e0b 50%, #12b981); }
.scale__bar i { position: absolute; inset-block: -4px; inset-inline-start: var(--p); inline-size: 4px; border-radius: 3px; background: var(--text); transform: translateX(-50%); }
.scale__marks { display: flex; justify-content: space-between; font: 600 13px var(--f-mono); }
.scale__marks span { display: grid; gap: 2px; } .scale__marks span:nth-child(2) { text-align: center; } .scale__marks span:last-child { text-align: end; }
.scale__marks small { font: 400 12px var(--f-body); color: var(--text-3); }
.grades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gr { padding: 14px; border-radius: 16px; display: grid; justify-items: center; gap: 2px; color: #fff; font: 600 12px var(--f-mono); background: linear-gradient(145deg, var(--g1), var(--g2)); }
.gr b { font: 800 2rem/1 var(--f-display); }
.gr--S { --g1: #ffc83d; --g2: #f08c00; } .gr--A { --g1: #34d399; --g2: #0e9f6e; } .gr--B { --g1: #60a5fa; --g2: #2563eb; }
.gr--C { --g1: #a78bfa; --g2: #6d4ff0; } .gr--D { --g1: #fb923c; --g2: #d9480f; } .gr--F { --g1: #fb7185; --g2: #d92d3a; }

.cards3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px; }
.feat { padding: 22px; display: grid; gap: 8px; align-content: start; }
.feat h3 { font-size: 1.15rem; margin-block-start: 6px; } .feat p { color: var(--text-2); font-size: 14.5px; }

.cta-band { padding-block: clamp(48px, 7vw, 88px); }
.cta-band__in { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding: clamp(24px, 4vw, 44px); border-radius: 26px; color: #fff; background: radial-gradient(120% 140% at 0% 0%, #7a66ff, #4f3ff0 45%, #2c20b8); box-shadow: 0 40px 80px -40px rgba(79, 63, 240, .7); }
.cta-band h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); } .cta-band p { color: rgba(255, 255, 255, .8); margin-block-start: 6px; }
.cta-band .btn--brand { background: #fff; color: #2c20b8; box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .5); }

@media (max-width: 920px) { .hero__in { grid-template-columns: 1fr; } .demo { transform: none; } }
@media (max-width: 520px) { .hero__cta .btn { flex: 1 1 100%; } .demo__foot .dim { display: none; } }
@media (prefers-reduced-motion: reduce) { .demo { transform: none; transition: none; } .dot { animation: none; } }

/* ═════════ brand v2: landing ═════════ */
.hero__title { font-weight: 800; }
.mystery { background: rgba(var(--brand-rgb), .16); color: var(--brand-ink); font-family: var(--f-pixel); font-size: 13px; }
.mystery img { inline-size: 18px; block-size: 18px; }
.demo { border: 2px solid var(--text); box-shadow: var(--pop); transform: perspective(1400px) rotateY(-3deg) rotateX(1.5deg); }
:root[data-theme="dark"] .demo { border-color: rgba(var(--brand-rgb), .5); }
.demo__btn--buy { background: #07b88a; color: #03140f; font-family: var(--f-pixel); } .demo__btn--sell { background: #e0304f; font-family: var(--f-pixel); }
.hero__art { position: relative; }
.sticker { position: absolute; inset-inline-end: -6px; inset-block-start: -112px; inline-size: clamp(130px, 17vw, 200px); block-size: auto; z-index: 3; animation: bob 3.6s ease-in-out infinite; filter: drop-shadow(4px 5px 0 rgba(0, 0, 0, .25)); pointer-events: none; }
@keyframes bob { 50% { transform: translateY(-8px) rotate(2deg); } }
.bubble { position: absolute; inset-inline-end: clamp(150px, 19vw, 230px); inset-block-start: -84px; z-index: 3; padding: 7px 12px; border-radius: 12px; background: #fff; color: #06130e; border: 2px solid #06130e; font: 600 13px var(--f-pixel); letter-spacing: .03em; white-space: nowrap; box-shadow: 3px 3px 0 var(--brand); animation: bob 3.6s ease-in-out -.8s infinite; }
.bubble::after { content: ""; position: absolute; inset-inline-end: -8px; inset-block-end: 5px; inline-size: 12px; block-size: 12px; background: #fff; border-inline-end: 2px solid #06130e; border-block-end: 2px solid #06130e; transform: rotate(-45deg); }
@media (max-width: 920px) { .sticker { inset-block-start: -86px; inset-inline-end: 0; inline-size: 150px; } .bubble { inset-block-start: -62px; inset-inline-end: 150px; } .hero__art { margin-block-start: 64px; } }

.ticker { overflow: hidden; border-block: 2px solid var(--text); background: var(--brand); color: var(--on-brand); direction: ltr; }
:root[data-theme="dark"] .ticker { border-color: rgba(var(--brand-rgb), .6); }
.ticker__track { display: flex; inline-size: max-content; animation: marquee 38s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker span { padding: 11px 26px; font: 600 14px/1 var(--f-pixel); letter-spacing: .12em; white-space: nowrap; }
.ticker span::after { content: "▮"; margin-inline-start: 52px; opacity: .55; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track, .sticker, .bubble { animation: none; } }

.cta-band__in { background: var(--brand); color: var(--on-brand); border: 2px solid #03140f; box-shadow: 6px 6px 0 #03140f; }
:root[data-theme="dark"] .cta-band__in { box-shadow: 6px 6px 0 rgba(var(--brand-rgb), .5); border-color: #03140f; }
.cta-band p { color: rgba(3, 20, 15, .75); }
.cta-band .btn--brand { background: #050807; color: var(--brand); border-color: #050807; box-shadow: 0 4px 0 rgba(0, 0, 0, .5); }
.scale__bar { background: linear-gradient(90deg, #ff4d6d, #ffc857 50%, #0efbc5); }
.gr { font-family: var(--f-pixel); } .gr b { font-family: var(--f-pixel); }
.step svg { stroke: var(--brand-ink); }
.eyebrow { font-size: 13px; }

.gr b { font-family: var(--f-display); }
.gr { font-family: var(--f-mono); font-size: 12px; }

/* top traders */
#traders[hidden] { display: none; }
.tt { border-radius: 22px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--card-shadow); overflow: clip; }
.tt__row { display: grid; grid-template-columns: 34px 46px minmax(0, 1fr) minmax(90px, 220px) auto; gap: 14px; align-items: center; padding: 14px 20px; border-block-end: 1px solid var(--line); transition: background-color 160ms ease; }
.tt__row:last-child { border-block-end: 0; }
.tt__row:hover { background: var(--ov-1); }
.tt__row--top { background: linear-gradient(90deg, rgba(var(--brand-rgb), .09), transparent 55%); }
.tt__av { display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 14px; font: 800 18px var(--f-display); color: #fff; background: linear-gradient(145deg, hsl(var(--h) 72% 52%), hsl(calc(var(--h) + 40) 70% 40%)); box-shadow: 0 6px 14px -8px hsl(var(--h) 70% 30%); }
.tt__who { display: grid; min-inline-size: 0; } .tt__who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.02rem; }
.tt__who span { color: var(--text-3); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt__meter { block-size: 8px; border-radius: 99px; background: var(--ov-2); overflow: hidden; }
.tt__meter i { display: block; block-size: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--brand-lo), var(--brand)); }
.tt__score { display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end; min-inline-size: 84px; }
.tt__score b { font: 800 1.5rem/1 var(--f-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tt__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-block-start: 14px; }
@media (max-width: 720px) { .tt__who span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .tt__row { grid-template-columns: 28px 40px minmax(0, 1fr) auto; gap: 10px; padding: 12px 14px; } .tt__meter { display: none; } .tt__av { inline-size: 40px; block-size: 40px; } }