/* INDEX on Robinhood Chain: studio white glass, soft mint light, deep green ink. Layout after buyindex.fun. */
:root {
  --bg: #eef3f0; --bg-hi: #fbfdfc; --bg-lo: #dfe9e4;
  --ink: #0c1813; --ink-2: #26352e; --mut: #5d6e66; --mut-2: #8a9a92;
  --glass: rgba(255, 255, 255, .58); --glass-hi: rgba(255, 255, 255, .82); --glass-line: rgba(255, 255, 255, .9); --line: rgba(18, 52, 40, .1); --line-2: rgba(18, 52, 40, .18);
  --mint: #3fae86; --mint-hi: #7fd8b4; --mint-lo: #e2f4ec; --up: #1f9b6c; --down: #d0485c;
  --shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 0 0 1px rgba(18,52,40,.08), 0 18px 40px -22px rgba(20,60,45,.35);
  --r: 18px; --r-sm: 12px; --top-h: 34px; --nav-h: 62px; --gut: clamp(16px, 2.6vw, 34px); --wrap: 1260px;
  --f: 'Satoshi', ui-sans-serif, system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font: 500 15px/1.55 var(--f); color: var(--ink); background: radial-gradient(1200px 700px at 50% 0%, var(--bg-hi), var(--bg) 55%, var(--bg-lo)); background-attachment: fixed; min-height: 100vh; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
::selection { background: var(--mint-hi); color: var(--ink); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.mono { font-family: var(--mono); }
.mut { color: var(--mut); }
.up { color: var(--up); } .down { color: var(--down); }
.hide { display: none !important; }
#stage { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; }
main, header, footer, .top { position: relative; z-index: 2; }

/* glass surfaces */
.glass { background: var(--glass); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); border: 1px solid var(--glass-line); border-radius: var(--r); box-shadow: var(--shadow); }
.glass.solid { background: var(--glass-hi); }

/* ---------- top wire ---------- */
.top { height: var(--top-h); background: #0c1813; color: #dbe7e1; display: flex; align-items: center; gap: 0; font: 500 12px var(--mono); overflow: hidden; }
.top .tk { display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 100%; border-right: 1px solid rgba(255,255,255,.1); white-space: nowrap; }
.top .tk b { background: var(--mint-hi); color: #062b1d; padding: 3px 7px; border-radius: 4px; font-weight: 700; }
.top .tk .m { color: #8fb3a2; }
.top .wire { flex: 1; overflow: hidden; white-space: nowrap; padding: 0 16px; font-family: var(--f); font-size: 13px; color: #c6d6cf; }
.top .wire span { display: inline-block; animation: wire 40s linear infinite; padding-left: 100%; }
.top .wire span.still { animation: none; padding-left: 0; }
@keyframes wire { to { transform: translateX(-100%); } }
.top .news { padding: 0 16px; color: var(--mint-hi); font-weight: 700; letter-spacing: .08em; }

/* ---------- header ---------- */
.nav { height: var(--nav-h); border-bottom: 1px solid var(--line); background: rgba(246,250,248,.55); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); position: sticky; top: 0; z-index: 30; }
.nav .wrap { max-width: none; height: 100%; display: flex; align-items: center; gap: 34px; padding: 0 2.6%; }
.logo { display: flex; align-items: center; }
.logo svg, .logo img { height: 30px; width: auto; display: block; }
.mark img { width: 100%; height: auto; display: block; }
.nav .links { display: flex; gap: 26px; font-weight: 700; font-size: 15px; color: var(--ink-2); }
.nav .links a { padding: 6px 0; border-bottom: 2px solid transparent; }
.nav .links a:hover { color: var(--ink); }
.nav .links a[aria-current] { color: var(--ink); border-color: var(--ink); }
.nav .right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.nav .what { font-weight: 700; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; margin-right: 6px; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 13px; border-radius: 999px; background: var(--glass-hi); border: 1px solid var(--glass-line); box-shadow: var(--shadow); font: 600 12.5px var(--mono); cursor: pointer; white-space: nowrap; }
.chip:hover { background: #fff; }
.chip svg { width: 13px; height: 13px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 20px; border-radius: 999px; border: 0; background: var(--ink); color: #fff; font: 700 15px var(--f); cursor: pointer; white-space: nowrap; box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 10px 22px -12px rgba(12,24,19,.6); transition: transform .15s; }
.btn:hover { transform: translateY(-1px); }
.btn.glassy { background: var(--glass-hi); color: var(--ink); border: 1px solid var(--glass-line); box-shadow: var(--shadow); }
.btn.mint { background: linear-gradient(180deg, #8ee2c0, #4dbb92); color: #062b1d; }
.btn.sm { height: 34px; padding: 0 14px; font-size: 13.5px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.icon-btn { width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; background: var(--glass-hi); border: 1px solid var(--glass-line); box-shadow: var(--shadow); }
.icon-btn svg { width: 14px; height: 14px; }
.burger { display: none; }

/* ---------- hero ---------- */
.hero { min-height: calc(100vh - var(--top-h) - var(--nav-h)); display: flex; align-items: flex-end; padding: 0 0 48px; }
.hero .wrap { width: 100%; display: grid; grid-template-columns: 1fr 430px; gap: 30px; align-items: end; }
.hero h1 { font: 900 clamp(64px, 9.6vw, 148px)/.9 var(--f); letter-spacing: -0.055em; color: var(--ink); text-shadow: 0 1px 0 rgba(255,255,255,.7); }
.hero h1 .l2 { color: transparent; background: linear-gradient(180deg, #5fbf98 0%, #3a9a76 50%, #1f6f52 100%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 1px 0 rgba(255,255,255,.8)); }
.ticket { padding: 18px; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tab { border: 0; background: transparent; padding: 7px 11px; border-radius: 9px; font: 700 13px var(--f); color: var(--mut); cursor: pointer; }
.tab.on { background: rgba(12,24,19,.07); color: var(--ink); }
.ticket .lvl { display: flex; align-items: baseline; gap: 10px; margin: 16px 2px 14px; }
.ticket .lvl b { font: 800 30px/1 var(--f); letter-spacing: -0.03em; }
.ticket .lvl small { font: 600 13px var(--mono); }
.levs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.lev { height: 40px; border-radius: 11px; border: 1px solid var(--line-2); background: rgba(255,255,255,.6); font: 700 15px var(--f); cursor: pointer; }
.lev.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.sides { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.side { height: 54px; border-radius: 14px; font: 900 18px var(--f); letter-spacing: .02em; cursor: pointer; border: 2px solid var(--ink); display: grid; place-items: center; }
.side.long { background: var(--ink); color: #fff; }
.side.short { background: rgba(255,255,255,.75); color: var(--ink); }
.ticket .note { margin-top: 12px; font-size: 13px; color: var(--mut); }

/* ---------- index board ---------- */
.board { padding: 28px 0 10px; }
.board .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.icard { padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 14px; min-height: 420px; }
.icard .hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.icard h3 { font: 900 30px/1 var(--f); letter-spacing: -0.03em; }
.icard .sub { font-size: 13.5px; color: var(--mut); margin-top: 6px; }
.icard .val { text-align: right; }
.icard .val b { font: 800 30px/1 var(--f); letter-spacing: -0.03em; display: block; }
.icard .val small { font: 600 13px var(--mono); }
.icard canvas { width: 100%; height: 150px; }
.icard .row { display: flex; gap: 18px; font: 600 12px var(--mono); color: var(--mut); flex-wrap: wrap; }
.icard .row b { color: var(--ink); }
.icard .faces { display: flex; align-items: center; }
.icard .faces img, .icard .faces span { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #fff; margin-right: -8px; background: var(--mint-lo); object-fit: cover; display: grid; place-items: center; font: 700 10px var(--mono); color: var(--ink-2); }
.icard .go { margin-top: auto; display: flex; gap: 8px; }

/* ---------- section heads (numbered like INDEX) ---------- */
.sec { padding: 120px 0 0; }
.shd { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.shd .n { font: 700 12px var(--mono); background: var(--ink); color: #fff; border-radius: 999px; padding: 3px 9px; }
.shd .t { font-weight: 800; font-size: 14px; }
.shd::after { content: ''; flex: 1; height: 1px; background: var(--line-2); margin-left: 8px; }
.h2 { font: 900 clamp(48px, 7vw, 104px)/.92 var(--f); letter-spacing: -0.05em; }
.lede { font-size: 17px; color: var(--ink-2); max-width: 42em; margin-top: 18px; font-weight: 500; }

/* market map */
.maps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 34px; }
.map { padding: 16px; }
.map .mh { display: flex; justify-content: space-between; align-items: baseline; margin: 2px 4px 12px; }
.map .mh b { font: 900 20px var(--f); letter-spacing: -0.02em; }
.tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.tile { aspect-ratio: 1 / .82; border-radius: 12px; padding: 10px; display: flex; flex-direction: column; justify-content: space-between; color: #0c1813; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.7); box-shadow: 0 1px 0 rgba(255,255,255,.7) inset; transition: transform .2s; }
.tile:hover { transform: translateY(-2px); }
.tile b { font: 800 14px var(--f); }
.tile small { font: 600 11px var(--mono); }
.tile img { width: 22px; height: 22px; border-radius: 50%; position: absolute; right: 8px; top: 8px; }
.tile.flash { animation: flash .8s; }
@keyframes flash { 40% { box-shadow: 0 0 0 3px rgba(255,255,255,.95) inset; } }

/* news + side cards */
.newsgrid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 16px; margin-top: 30px; align-items: start; }
.pills { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pill { border: 1px solid var(--glass-line); background: var(--glass); border-radius: 999px; padding: 7px 14px; font: 800 13px var(--f); cursor: pointer; box-shadow: var(--shadow); }
.pill.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.feed { margin-top: 14px; padding: 6px 18px; }
.feed .ev { display: flex; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.feed .ev:last-child { border-bottom: 0; }
.feed .ev time { font: 600 12px var(--mono); color: var(--mut); min-width: 64px; }
.side-card { padding: 18px; }
.side-card .sh { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 10px; border-bottom: 1px solid var(--line-2); margin-bottom: 12px; }
.side-card .sh b { font-weight: 800; }
.side-card .sh small { font-size: 12px; color: var(--mut); }
.side-card + .side-card { margin-top: 14px; }
.empty { color: var(--mut); font-size: 14px; }

/* book */
.book { margin-top: 34px; padding: 18px 22px; }
.book .bh, .book .br { display: grid; grid-template-columns: 1.2fr 110px 1.2fr 110px; gap: 14px; align-items: center; }
.book .bh { font: 600 12px var(--mono); color: var(--mut); padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.book .br { padding: 14px 0; border-bottom: 1px solid var(--line); }
.book .bar { height: 12px; border-radius: 99px; background: rgba(12,24,19,.06); overflow: hidden; }
.book .bar i { display: block; height: 100%; border-radius: 99px; }
.book .bar.l i { background: linear-gradient(90deg, #8ee2c0, #3fae86); margin-left: auto; }
.book .bar.s i { background: linear-gradient(90deg, #f0a3ae, #d0485c); }
.book .ix { text-align: center; font-weight: 900; }
.book .bfoot { font-size: 12.5px; color: var(--mut); padding-top: 12px; }

/* burns */
.burnbig { margin-top: 30px; padding: 54px 20px; text-align: center; }
.burnbig b { font: 900 clamp(70px, 11vw, 150px)/.9 var(--f); letter-spacing: -0.06em; display: block; }
.burnbig small { display: block; margin-top: 10px; font-weight: 800; color: var(--up); }
.steps4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 16px; }
.step { padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.step .n { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font: 700 12px var(--mono); }
.step h4 { font: 900 24px/1.05 var(--f); letter-spacing: -0.03em; margin-top: 8px; }
.step p { font-size: 13.5px; color: var(--ink-2); }
.step .v { margin-top: auto; align-self: flex-start; font: 700 12px var(--mono); padding: 5px 9px; border-radius: 99px; background: rgba(12,24,19,.06); }
.burnbar { margin-top: 14px; padding: 14px 18px; display: flex; align-items: center; gap: 12px; font-weight: 700; }
.burnbar a { margin-left: auto; font-weight: 800; }

/* get listed */
.listed { display: grid; grid-template-columns: 1fr 1.1fr; gap: 28px; margin-top: 10px; align-items: start; }
.check { display: flex; gap: 10px; margin-top: 24px; }
.check input { flex: 1; height: 50px; border-radius: 999px; border: 1px solid var(--glass-line); background: var(--glass-hi); padding: 0 20px; font: 500 14px var(--mono); outline: 0; box-shadow: var(--shadow); }
.check input:focus { border-color: var(--mint); }
.checkout { margin-top: 14px; padding: 14px 18px; font-size: 14px; }
.screens { padding: 20px 22px; }
.screens .sh2 { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid var(--line-2); }
.screens .sh2 b { font: 900 20px var(--f); }
.screens table { width: 100%; border-collapse: collapse; margin-top: 4px; }
.screens th { font: 700 12px var(--mono); color: var(--mut); text-align: right; padding: 12px 0 8px; }
.screens th:first-child, .screens td:first-child { text-align: left; }
.screens td { padding: 11px 0; border-top: 1px solid var(--line); text-align: right; font: 800 16px var(--f); }
.screens td:first-child { font: 600 13px var(--f); color: var(--mut); }
.screens .fine { font-size: 12.5px; color: var(--mut); margin-top: 12px; }

/* $INDEX coin card */
.coincard { margin-top: 30px; padding: 22px; }
.coincard .ct { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.coincard .mark { width: 64px; height: 64px; border-radius: 16px; background: linear-gradient(160deg, #ffffff, #d6e8df); border: 1px solid #fff; box-shadow: var(--shadow); display: grid; place-items: center; }
.coincard .mark svg { width: 40px; }
.coincard .mark img { width: 100%; height: 100%; object-fit: cover; border-radius: 15px; }
.coincard h3 { font: 900 32px var(--f); letter-spacing: -0.03em; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; font: 700 12px var(--f); background: var(--mint-lo); color: #136847; }
.coincard .links { margin-left: auto; display: flex; gap: 8px; }
.coincard .kpis { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); margin: 20px 0 16px; }
.coincard .kpis div { padding: 14px; border-right: 1px solid var(--line); }
.coincard .kpis div:last-child { border-right: 0; }
.coincard .kpis small { font-size: 12.5px; color: var(--mut); }
.coincard .kpis b { display: block; font: 800 22px var(--f); margin-top: 4px; }
.coincard .cf { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.coincard .cf p { flex: 1; min-width: 260px; font-size: 14px; color: var(--ink-2); }

/* faq */
.faq { display: grid; grid-template-columns: 1fr 1.25fr; gap: 30px; align-items: start; }
.faq .list { display: flex; flex-direction: column; gap: 10px; }
.faq details { padding: 0 20px; }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px; padding: 17px 0; font: 800 16px var(--f); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .n { font: 600 11px var(--mono); color: var(--mut); width: 18px; }
.faq summary::after { content: '+'; margin-left: auto; font: 500 20px var(--mono); }
.faq details[open] summary::after { content: '−'; }
.faq details p { padding: 0 0 18px 34px; font-size: 14.5px; color: var(--ink-2); }

/* footer: the glass blocks assemble behind it */
.foot { margin-top: 140px; min-height: 92vh; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 0 28px; }
.foot .fl { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.foot .fl nav { display: flex; gap: 22px; font-weight: 800; flex-wrap: wrap; }
.foot .fl p { margin-left: auto; max-width: 520px; font-size: 12.5px; color: var(--mut); text-align: right; }
.foot .fl .ca { font: 600 12.5px var(--mono); }

/* modal + wallet picker + toast */
.modal { position: fixed; inset: 0; z-index: 100; background: rgba(220,232,226,.55); backdrop-filter: blur(8px); display: grid; place-items: center; padding: 16px; }
.modal .box { width: min(440px, 100%); padding: 24px; }
.modal h3 { font: 900 26px var(--f); letter-spacing: -0.03em; }
.wlist { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.wopt { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--glass-line); background: rgba(255,255,255,.6); text-align: left; cursor: pointer; font-weight: 800; }
.wopt:hover { background: #fff; }
.wopt img, .wopt .wl { width: 32px; height: 32px; border-radius: 9px; flex: none; }
.wopt .wl { display: grid; place-items: center; background: var(--mint-lo); font-weight: 900; }
.wopt b { flex: 1; }
.wopt .mut { font: 600 11px var(--mono); }
.wopt.off { opacity: .6; }
.note { font-size: 13px; color: var(--mut); margin-top: 14px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 14px; font-weight: 700; opacity: 0; transition: all .25s; z-index: 200; pointer-events: none; max-width: min(90vw, 520px); text-align: center; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.rv { opacity: 0; transform: translateY(24px); transition: opacity .8s, transform .8s cubic-bezier(.2,.8,.2,1); }
.rv.in { opacity: 1; transform: none; }

@media (max-width: 1000px) {
  .hero .wrap, .newsgrid, .listed, .faq { grid-template-columns: 1fr; }
  .board .grid, .maps { grid-template-columns: 1fr; }
  .steps4 { grid-template-columns: 1fr 1fr; }
  .nav .links, .nav .what { display: none; }
  .burger { display: grid; }
  .nav .links.open { display: flex; position: absolute; top: var(--nav-h); left: 0; right: 0; flex-direction: column; gap: 0; background: rgba(246,250,248,.96); padding: 8px 4% 14px; border-bottom: 1px solid var(--line); }
  .nav .links.open a { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .coincard .kpis { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .top .tk .m, .nav .right .chip.ca { display: none; }
  .tiles { grid-template-columns: repeat(3, 1fr); }
  .steps4 { grid-template-columns: 1fr; }
  .book .bh, .book .br { grid-template-columns: 1fr 70px 1fr 70px; font-size: 12px; }
  .foot .fl p { text-align: left; margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } .top .wire span { animation: none; padding-left: 0; } }

/* floors */
.post { padding: 10px 0; border-bottom: 1px solid var(--line); }
.post:last-child { border-bottom: 0; }
.post .ph2 { display: flex; gap: 8px; align-items: baseline; font-size: 14px; }
.post p { margin: 4px 0 0; font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.fc { padding: 4px 0 12px; border-bottom: 1px solid var(--line); }
.fcomp textarea, .fname input { width: 100%; box-sizing: border-box; font: 500 14px Satoshi, sans-serif; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.7); resize: vertical; }
.fname { display: flex; gap: 8px; } .fname input { flex: 1; }
.frow { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }