/*
  Palette tokens - the only file allowed to hold colour literals.
  Every value is a real pixel sampled from the supplied artwork (k-means cluster,
  snapped to the nearest actual pixel; coordinates are x,y in the source raster).
    --bg     #000000  brand/LOGO ARTIVEXA PNG.png            pixel (0,0), most frequent colour
    --grn    #48f2a7  brand/LOGO ARTIVEXA PNG...png          pixel (1170,604), dominant logo fill (k-means centre 72.1,242.1,167.4)
    --grn-2  #95e8cc  reference/ARTIVEXA 1.jpg.jpeg          pixel (1561,617), pale mint highlight cluster
    --ink    #f9fdfc  reference/ARTIVEXA 1.jpg.jpeg          pixel (154,42), headline white cluster
    --label  #429f70  reference/ARTIVEXA 1.jpg.jpeg          pixel (900,645), mid green cluster
    --dim    #2a895f  brand/LOGO ARTIVEXA PNG.png            pixel (671,1007), logo edge gradient cluster
    --deep   #285f42  reference/ARTIVEXA 1.jpg.jpeg          pixel (1395,307), dark green cluster
  Surfaces, hairlines and glows are mixes of the tokens above, never new literals.
*/
:root {
  --bg: #000000;
  --grn: #48f2a7;
  --grn-2: #95e8cc;
  --ink: #f9fdfc;
  --label: #429f70;
  --dim: #2a895f;
  --deep: #285f42;

  --panel: color-mix(in srgb, var(--grn) 3%, var(--bg));
  --tile: color-mix(in srgb, var(--grn) 8%, var(--bg));
  --tile-2: color-mix(in srgb, var(--grn) 15%, var(--bg));
  --line: color-mix(in srgb, var(--deep) 55%, var(--bg));
  --line-2: var(--deep);
  --spot: color-mix(in srgb, var(--grn) 16%, transparent);
  --phos: 0 0 2px color-mix(in srgb, var(--grn) 40%, transparent), 0 0 12px color-mix(in srgb, var(--grn) 13%, transparent);
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}

/* Layout values measured from the reference page: body 15/24 mono, main 1100 max with 24 padding,
   hairline stat grid (6px gap rows, 26px column gap), 12px caps headings at .14em, 150ms hover transitions,
   560px phone breakpoint with 14px gutters. */
html { background: var(--bg); scroll-behavior: smooth; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15px/24px var(--mono); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: var(--grn); text-decoration: none; transition: color 150ms; }
a:hover { color: var(--grn-2); }
img { max-width: 100%; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--grn); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

#prog { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 100; background: var(--grn); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); box-shadow: var(--phos); pointer-events: none; }

/* header */
.top { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "brand soc" "nav nav"; align-items: center; gap: 4px 18px; padding: 12px 24px; border-bottom: 1px solid var(--line); position: relative; z-index: 5; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(8px); }
@media (min-width: 761px) { .top { grid-template-columns: auto 1fr auto; grid-template-areas: "brand nav soc"; } }
.brand { grid-area: brand; display: flex; align-items: center; gap: 12px; min-height: 44px; color: var(--ink); }
.brand img { width: 28px; height: 28px; image-rendering: pixelated; }
.brand b { letter-spacing: .18em; font-size: 12px; }
.brand i { color: var(--dim); font-style: normal; font-size: 11px; }
.top nav { grid-area: nav; display: flex; flex-wrap: wrap; gap: 0 6px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; justify-self: end; }
@media (max-width: 760px) { .top nav { justify-self: start; } }
.top nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }
.soc-row { grid-area: soc; display: flex; gap: 2px; justify-self: end; }
.soc { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--grn); border-radius: 6px; transition: background 150ms, color 150ms; }
.soc svg { width: 20px; height: 20px; fill: currentColor; display: block; }
a.soc:hover { background: var(--tile); color: var(--grn-2); }
.soc.inert { color: var(--dim); cursor: default; opacity: .75; }

main { max-width: 1100px; margin: 0 auto; padding: 24px; }

/* contract slot */
.caslot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 14px 18px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--panel); position: relative; overflow: hidden; }
.caslot .k { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--label); flex: 0 0 auto; }
.ca-val { flex: 1 1 280px; min-width: 0; min-height: 44px; display: flex; align-items: center; text-align: left; padding: 0; margin: 0; background: none; border: 0; cursor: pointer; color: var(--grn); font: 700 clamp(17px, 4.8vw, 28px)/1.2 var(--mono); letter-spacing: -.01em; word-break: break-all; text-shadow: var(--phos); }
.ca-val.pending { color: var(--dim); cursor: default; text-shadow: none; font-weight: 400; }
.cp { min-width: 44px; min-height: 44px; padding: 0 14px; background: transparent; border: 1px solid var(--line-2); color: var(--grn); font-size: 12px; letter-spacing: .08em; border-radius: 4px; cursor: pointer; transition: background 150ms, border-color 150ms, color 150ms; }
.cp:hover:not(:disabled) { background: var(--tile); border-color: var(--grn); }
.cp:disabled { color: var(--dim); cursor: default; opacity: .6; }
.cp.done, .ca-val.done { color: var(--ink); border-color: var(--grn); background: var(--tile-2); }

/* hero */
.hero { position: relative; isolation: isolate; margin: 20px -24px 0; padding: 36px 24px 28px; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: center; --px: 0; --py: 0; --sy: 0; }
@media (max-width: 760px) { .hero { grid-template-columns: minmax(0, 1fr); } }
.mesh { position: absolute; inset: -10%; z-index: -3; filter: blur(46px); translate: calc(var(--px) * -6px) calc(var(--py) * -6px); }
.mesh i { position: absolute; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--grn) 30%, transparent), transparent 66%); animation: drift 16s ease-in-out infinite alternate; }
.mesh i:nth-child(1) { width: 52%; aspect-ratio: 1; left: 48%; top: 6%; }
.mesh i:nth-child(2) { width: 40%; aspect-ratio: 1; left: -4%; top: 40%; animation-duration: 21s; animation-delay: -6s; background: radial-gradient(circle, color-mix(in srgb, var(--deep) 70%, transparent), transparent 66%); }
.mesh i:nth-child(3) { width: 34%; aspect-ratio: 1; left: 60%; top: 52%; animation-duration: 25s; animation-delay: -11s; background: radial-gradient(circle, color-mix(in srgb, var(--grn-2) 16%, transparent), transparent 66%); }
@keyframes drift { from { transform: translate3d(-6%, -4%, 0) scale(1); } to { transform: translate3d(8%, 6%, 0) scale(1.18); } }
.gridl { position: absolute; inset: -40px; z-index: -2; opacity: .55; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(ellipse at 60% 40%, var(--bg), transparent 72%); -webkit-mask-image: radial-gradient(ellipse at 60% 40%, var(--bg), transparent 72%); translate: calc(var(--px) * 10px) calc(var(--py) * 10px + var(--sy) * 22px); }
.deb { position: absolute; z-index: -1; background: var(--grn); opacity: .5; width: var(--s); height: var(--s); left: var(--x); top: var(--y); translate: calc(var(--px) * var(--d) * 1px) calc(var(--py) * var(--d) * 1px + var(--sy) * var(--d) * 1px); animation: bob 5s ease-in-out infinite alternate; animation-delay: var(--t); box-shadow: var(--phos); }
@keyframes bob { from { transform: translateY(-5px); } to { transform: translateY(6px); } }
.hero-copy { min-width: 0; }
.mark { display: block; width: 100%; max-width: 520px; height: auto; color: var(--ink); filter: drop-shadow(0 0 12px color-mix(in srgb, var(--grn) 28%, transparent)); }
.mark g { animation: pixin 700ms cubic-bezier(.2, .9, .3, 1.2) both; animation-delay: calc(var(--i) * 70ms + 120ms); }
@keyframes pixin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
p { color: var(--dim); font-size: 13px; line-height: 20px; margin: 0 0 8px; }
p b { color: var(--ink); font-weight: 700; }
p.tag { color: var(--ink); font-size: clamp(20px, 2.2vw + 6px, 30px); line-height: 1.32; letter-spacing: -.025em; margin: 18px 0 6px; }
p.lede { color: var(--label); max-width: 520px; }
.pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.pill { display: inline-flex; align-items: center; gap: 9px; min-height: 36px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); background: var(--panel); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--grn); position: relative; flex: none; }
.dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--grn); animation: ping 1.8s cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes ping { 0% { transform: scale(1); opacity: .7; } 80%, 100% { transform: scale(3.2); opacity: 0; } }
.pill[data-state="pending"] .dot, .pill[data-state="paused"] .dot { background: var(--dim); }
.pill[data-state="pending"] .dot::after, .pill[data-state="paused"] .dot::after { animation: none; opacity: 0; }
.pill[data-state="retry"] .dot { background: var(--ink); }
.pill[data-state="retry"] .dot::after { background: var(--ink); }
.hero-logo { position: relative; display: grid; place-items: center; min-width: 0; }
.hero-logo img { width: min(100%, 420px); height: auto; image-rendering: pixelated; filter: drop-shadow(0 0 28px color-mix(in srgb, var(--grn) 38%, transparent)); translate: calc(var(--px) * 14px) calc(var(--py) * 14px + var(--sy) * 34px); animation: float 6s ease-in-out infinite alternate; }
@keyframes float { from { transform: translateY(-8px) rotate(-.6deg); } to { transform: translateY(10px) rotate(.6deg); } }
@media (max-width: 760px) { .hero-logo img { width: min(70%, 260px); } }

/* ticker */
.ticker { position: relative; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0 -24px; mask-image: linear-gradient(90deg, transparent, var(--bg) 6%, var(--bg) 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, var(--bg) 6%, var(--bg) 94%, transparent); }
.tick-track { display: flex; width: max-content; animation: tick 48s linear infinite; }
.ticker:hover .tick-track { animation-play-state: paused; }
@keyframes tick { to { transform: translateX(-50%); } }
.tick-set { display: flex; flex: none; }
.ti { display: inline-flex; align-items: center; gap: 10px; padding: 0 22px; min-height: 44px; font-size: 12px; letter-spacing: .06em; white-space: nowrap; border-right: 1px solid var(--line); }
.ti b { color: var(--ink); }
.ti span { color: var(--dim); font-variant-numeric: tabular-nums; }
.up { color: var(--grn); }
.dn { color: var(--ink); }
.flat { color: var(--dim); }

/* headings, sections */
h1, h2 { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--label); margin: 28px 0 10px; font-weight: 400; }
details { border-top: 1px solid var(--line); margin-top: 8px; }
details summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 44px; }
details summary::-webkit-details-marker { display: none; }
details summary::before { content: "+"; color: var(--label); font-size: 12px; width: 10px; }
details[open] summary::before { content: "\2212"; }
details summary h2 { margin: 16px 0 10px; }

/* stat tiles: hairlines, no boxes */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 26px; margin-top: 20px; border-top: 1px solid var(--line); }
@media (max-width: 560px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; } }
.stat { border-bottom: 1px solid var(--line); padding: 16px 0 20px; display: flex; flex-direction: column; gap: 6px; min-width: 0; position: relative; }
.stat .k { font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--label); line-height: 1.5; min-height: 3em; }
.stat .v { font-size: 19px; color: var(--grn); letter-spacing: .01em; font-variant-numeric: tabular-nums; text-shadow: var(--phos); overflow-wrap: anywhere; }
.stat .v .s { display: block; font-size: 11px; color: var(--dim); text-shadow: none; margin-top: 2px; }
.stat.inert .v { color: var(--dim); text-shadow: none; font-size: 15px; }
@media (max-width: 560px) { .stat .v { font-size: 17px; } details summary h2 { font-size: 13px; } }

/* spotlight */
.spot { position: relative; }
.spot::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 150ms; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), var(--spot), transparent 70%); border-radius: inherit; }
.spot:hover::before { opacity: 1; }

/* market table */
.tabs { display: flex; gap: 4px; margin: 4px 0 10px; flex-wrap: wrap; }
.tab { min-height: 44px; padding: 0 14px; background: transparent; border: 1px solid var(--line); color: var(--label); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; border-radius: 4px; cursor: pointer; transition: background 150ms, color 150ms, border-color 150ms; }
.tab[aria-selected="true"] { color: var(--grn); border-color: var(--grn); background: var(--tile); }
.tab:hover { background: var(--tile); }
.mrows { border: 1px solid var(--line); border-radius: 6px; background: var(--panel); overflow: hidden; }
.mrow { display: grid; grid-template-columns: 28px minmax(0, 2.1fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr) 44px; gap: 0 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 12.5px; position: relative; }
.mrow:last-child { border-bottom: 0; }
.mrow.head { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--label); padding-top: 10px; padding-bottom: 10px; }
.mrow > * { min-width: 0; }
.mrow .n { color: var(--dim); font-size: 11px; }
.tok { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tok .nm { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.tok .nm b { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tok .nm small { color: var(--dim); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logo-t { width: 32px; height: 32px; border-radius: 6px; background: var(--tile-2); border: 1px solid var(--line-2); overflow: hidden; display: grid; place-items: center; flex: none; color: var(--grn); font-weight: 700; font-size: 13px; }
.logo-t img { width: 100%; height: 100%; object-fit: cover; display: block; }
.num { font-variant-numeric: tabular-nums; text-align: right; }
.mrow.head .num { text-align: right; }
.mrow .cell { transition: background 150ms; border-radius: 3px; padding: 1px 3px; }
.cell.fu { animation: fu 900ms ease-out; }
.cell.fd { animation: fd 900ms ease-out; }
@keyframes fu { from { background: color-mix(in srgb, var(--grn) 36%, transparent); } to { background: transparent; } }
@keyframes fd { from { background: color-mix(in srgb, var(--ink) 26%, transparent); } to { background: transparent; } }
.mrow.rin { animation: rin 520ms cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 55ms); }
@keyframes rin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sk { display: block; height: 12px; border-radius: 3px; background: linear-gradient(90deg, var(--tile) 0%, var(--tile-2) 45%, var(--tile) 90%); background-size: 220% 100%; animation: shim 1.3s linear infinite; }
@keyframes shim { from { background-position: 120% 0; } to { background-position: -100% 0; } }
.mrow.skel .logo-t { background: var(--tile); border-color: var(--line); }
.mnote { min-height: 24px; margin: 8px 0 0; font-size: 12px; color: var(--dim); }
.mnote.err { color: var(--ink); }
.mnote.err::before { content: "— "; color: var(--grn); }
@media (max-width: 760px) {
  .mrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; grid-template-areas: "tok tok cp" "price chg chg" "vol liq liq"; gap: 6px 10px; padding: 12px; }
  .mrow.head { display: none; }
  .mrow .n { display: none; }
  .mrow .tok { grid-area: tok; }
  .mrow .c-price { grid-area: price; text-align: left; }
  .mrow .c-chg { grid-area: chg; text-align: left; }
  .mrow .c-vol { grid-area: vol; text-align: left; }
  .mrow .c-liq { grid-area: liq; text-align: left; }
  .mrow .cp { grid-area: cp; }
  .mrow .c-price::before, .mrow .c-chg::before, .mrow .c-vol::before, .mrow .c-liq::before { content: attr(data-k); display: block; font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--label); }
}
.mrow .cp { padding: 0; min-width: 44px; }

/* method + registry + phases */
ol.how { margin: 0 0 8px 18px; padding: 0; color: var(--ink); font-size: 13px; line-height: 20px; }
ol.how li { padding: 3px 0; }
.reg { border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.reg-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px minmax(0, 2fr) auto; gap: 8px 14px; align-items: center; padding: 6px 12px; border-bottom: 1px solid var(--line); font-size: 12.5px; min-height: 44px; }
.reg-row:last-child { border-bottom: 0; }
.reg-row .st { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.reg-row.on .st { color: var(--grn); }
.reg-row code { font: inherit; font-size: 12px; color: var(--grn-2); word-break: break-all; }
.reg-row .k { color: var(--ink); }
.reg-row .none { color: var(--dim); }
@media (max-width: 560px) { .reg-row { grid-template-columns: minmax(0, 1fr) auto; } .reg-row code, .reg-row .none { grid-column: 1 / -1; } .reg-row .cp { grid-column: 2; grid-row: 1; } .reg-row .st { grid-column: 2; grid-row: 1; justify-self: end; } .reg-row.on .cp { display: none; } }
.phases { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1000px) { .phases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .phases { grid-template-columns: minmax(0, 1fr); } }
.phase { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 14px; display: flex; flex-direction: column; gap: 6px; transition: border-color 150ms; }
.phase:hover { border-color: var(--grn); }
.phase .no { color: var(--grn); font-size: 19px; text-shadow: var(--phos); }
.phase b { color: var(--ink); }
.phase .st { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-top: auto; }
.phase.on .st { color: var(--grn); }
footer { max-width: 1100px; margin: 18px auto 0; padding: 18px 24px 40px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 11px; letter-spacing: .1em; color: var(--dim); }

@media (max-width: 560px) {
  main { padding: 14px; }
  .top { padding: 8px 14px; }
  .hero { margin: 14px -14px 0; padding: 26px 14px 22px; }
  .ticker { margin: 0 -14px; }
  p, ol.how { font-size: 14px; line-height: 22px; }
  p.tag { font-size: 22px; }
  .caslot { padding: 12px; }
}

/* reveal */
.js [data-reveal] { opacity: 0; will-change: transform, opacity; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal] { opacity: 1; }
  .tick-track { width: auto; overflow-x: auto; }
  .ticker { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
  .tick-set[aria-hidden="true"] { display: none; }
  .dot::after { display: none; }
}