:root {
  --bg: #030707;
  --bg-2: #061314;       /* deep teal-black for alternating sections */
  --ink: #ffffff;
  --muted: #9fb3b4;
  --teal: #01f6f9;       /* brand teal (from the logo) */
  --teal-dark: #00a9ad;
  --line: #12292a;
  --display: "Anton", Impact, sans-serif;
  --body: "Sora", system-ui, sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 120px; }
body { background: var(--bg); color: var(--ink); font-family: var(--body); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img, canvas, svg, video { display: block; max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.c-teal { color: var(--teal); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  font-family: var(--body); font-weight: 800; font-size: .85rem; letter-spacing: .06em;
  padding: .95em 1.8em; border: 2px solid transparent; border-radius: 4px; cursor: pointer;
  transition: transform .15s, box-shadow .15s, background .15s, color .15s;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--teal); }
.btn:focus-visible, .ca:focus-visible, .social:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.btn-teal { background: var(--teal); color: #001214; }
.btn-teal:hover { box-shadow: 4px 4px 0 #fff; }
.btn-dark { background: #001214; color: var(--teal); border-color: var(--teal); }
.btn-outline { border-color: var(--teal); color: var(--teal); background: transparent; }
.btn-dex { background: transparent; color: #fff; border-color: #fff; font-family: var(--mono); letter-spacing: .1em; padding: .75em 1.4em; }
.btn-dex small { font-size: .65em; opacity: .6; margin-left: .4em; }
.btn-dex:hover { border-color: var(--teal); color: var(--teal); }

/* ---------- Nav ---------- */
/* nav + stats strip are pinned to the top together */
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(3, 7, 7, .94); backdrop-filter: blur(8px); }
.nav {
  position: relative;
  display: flex; align-items: center; gap: 2rem;
  padding: .7rem clamp(16px, 3vw, 2rem);
  border-bottom: 1px solid var(--line);
}

/* paint drips hanging off the teal line under the stats strip (pinned with the bar) */
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 34px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22640%22%20height=%2234%22%20viewBox=%220%200%20640%2034%22%3E%3Cpath%20d=%22M9.5%200%20C13.1%203%2014.0%206.3%2013.5%2014.0%20A4.5%204.5%200%200%200%2022.5%2014.0%20C22.0%206.3%2022.9%203%2026.5%200%20Z%22%20fill=%22%2301f6f9%22/%3E%3Cellipse%20cx=%2216.4%22%20cy=%2213.3%22%20rx=%221.0%22%20ry=%221.7%22%20fill=%22%23ffffff%22%20opacity=%22.55%22/%3E%3Cpath%20d=%22M64.3%200%20C66.7%203%2067.4%203.6%2067.0%208.0%20A3.0%203.0%200%200%200%2073.0%208.0%20C72.6%203.6%2073.3%203%2075.7%200%20Z%22%20fill=%22%2301f6f9%22/%3E%3Cellipse%20cx=%2269.0%22%20cy=%227.5%22%20rx=%220.8%22%20ry=%221.2%22%20fill=%22%23ffffff%22%20opacity=%22.55%22/%3E%3Cpath%20d=%22M106.6%200%20C111.4%203%20112.7%2010.8%20112.0%2024.0%20A6.0%206.0%200%200%200%20124.0%2024.0%20C123.3%2010.8%20124.6%203%20129.4%200%20Z%22%20fill=%22%2301f6f9%22/%3E%3Cellipse%20cx=%22115.9%22%20cy=%2223.1%22%20rx=%221.3%22%20ry=%222.3%22%20fill=%22%23ffffff%22%20opacity=%22.55%22/%3E%3Cpath%20d=%22M183.3%200%20C186.2%203%20186.9%205.0%20186.5%2011.0%20A3.5%203.5%200%200%200%20193.5%2011.0%20C193.1%205.0%20193.8%203%20196.7%200%20Z%22%20fill=%22%2301f6f9%22/%3E%3Cellipse%20cx=%22188.8%22%20cy=%2210.5%22%20rx=%220.8%22%20ry=%221.3%22%20fill=%22%23ffffff%22%20opacity=%22.55%22/%3E%3Cpath%20d=%22M226.5%200%20C230.5%203%20231.6%208.6%20231.0%2019.0%20A5.0%205.0%200%200%200%20241.0%2019.0%20C240.4%208.6%20241.5%203%20245.5%200%20Z%22%20fill=%22%2301f6f9%22/%3E%3Cellipse%20cx=%22234.2%22%20cy=%2218.2%22%20rx=%221.1%22%20ry=%221.9%22%20fill=%22%23ffffff%22%20opacity=%22.55%22/%3E%3Cpath%20d=%22M299.3%200%20C301.7%203%20302.4%203.1%20302.0%207.0%20A3.0%203.0%200%200%200%20308.0%207.0%20C307.6%203.1%20308.3%203%20310.7%200%20Z%22%20fill=%22%2301f6f9%22/%3E%3Cellipse%20cx=%22303.9%22%20cy=%226.5%22%20rx=%220.8%22%20ry=%221.2%22%20fill=%22%23ffffff%22%20opacity=%22.55%22/%3E%3Cpath%20d=%22M339.6%200%20C344.9%203%20346.3%2012.6%20345.5%2028.0%20A6.5%206.5%200%200%200%20358.5%2028.0%20C357.7%2012.6%20359.1%203%20364.4%200%20Z%22%20fill=%22%2301f6f9%22/%3E%3Cellipse%20cx=%22349.7%22%20cy=%2227.0%22%20rx=%221.4%22%20ry=%222.5%22%20fill=%22%23ffffff%22%20opacity=%22.55%22/%3E%3Cpath%20d=%22M422.4%200%20C425.6%203%20426.5%205.9%20426.0%2013.0%20A4.0%204.0%200%200%200%20434.0%2013.0%20C433.5%205.9%20434.4%203%20437.6%200%20Z%22%20fill=%22%2301f6f9%22/%3E%3Cellipse%20cx=%22428.6%22%20cy=%2212.4%22%20rx=%220.9%22%20ry=%221.5%22%20fill=%22%23ffffff%22%20opacity=%22.55%22/%3E%3Cpath%20d=%22M468.5%200%20C472.5%203%20473.6%209.5%20473.0%2021.0%20A5.0%205.0%200%200%200%20483.0%2021.0%20C482.4%209.5%20483.5%203%20487.5%200%20Z%22%20fill=%22%2301f6f9%22/%3E%3Cellipse%20cx=%22476.2%22%20cy=%2220.2%22%20rx=%221.1%22%20ry=%221.9%22%20fill=%22%23ffffff%22%20opacity=%22.55%22/%3E%3Cpath%20d=%22M539.3%200%20C541.7%203%20542.4%204.0%20542.0%209.0%20A3.0%203.0%200%200%200%20548.0%209.0%20C547.6%204.0%20548.3%203%20550.7%200%20Z%22%20fill=%22%2301f6f9%22/%3E%3Cellipse%20cx=%22544.0%22%20cy=%228.6%22%20rx=%220.8%22%20ry=%221.2%22%20fill=%22%23ffffff%22%20opacity=%22.55%22/%3E%3Cpath%20d=%22M581.5%200%20C586.0%203%20587.2%207.7%20586.5%2017.0%20A5.5%205.5%200%200%200%20597.5%2017.0%20C596.8%207.7%20598.0%203%20602.5%200%20Z%22%20fill=%22%2301f6f9%22/%3E%3Cellipse%20cx=%22590.1%22%20cy=%2216.2%22%20rx=%221.2%22%20ry=%222.1%22%20fill=%22%23ffffff%22%20opacity=%22.55%22/%3E%3C/svg%3E") repeat-x 0 0 / 640px 34px;
  filter: drop-shadow(0 0 6px rgba(1, 246, 249, .45));
}
/* ---------- Live stats strip ---------- */
.stats-strip { border-bottom: 2px solid var(--teal); overflow-x: auto; scrollbar-width: none; }
.stats-strip::-webkit-scrollbar { display: none; }
.ss-row { display: flex; align-items: center; gap: clamp(.6rem, 1.1vw, 1.1rem); width: max-content; min-width: 100%; padding: .8rem clamp(16px, 3vw, 2rem); font-family: var(--mono); white-space: nowrap; }
.ss-id { display: flex; align-items: center; gap: .45rem; }
.ss-id img { width: 32px; height: 32px; border-radius: 50%; }
.ss-id b { font-family: var(--body); font-weight: 800; font-size: 1rem; }
.ss-sym { font-size: .72rem; color: var(--muted); }
.ss-chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; font-weight: 700; padding: .35rem .6rem; border: 1px solid var(--line); border-radius: 5px; color: #d7e4e4; }
.ss-chip-tax { background: var(--teal); border-color: var(--teal); color: #001214; }
.dot { width: 6px; height: 6px; border-radius: 50%; }
.dot-holders { background: #00a9ad; }
.dot-creator { background: #bf8300; }
.ss-stat { display: flex; align-items: baseline; gap: .35rem; }
.ss-stat:first-of-type { margin-left: auto; }
.ss-k { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ss-v { font-size: .95rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ss-teal { color: var(--teal); }
.ss-sub { font-size: .7rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.ss-sub.up { color: #5fd08a; }
.ss-sub.down { color: #e5645a; }
.ss-link { font-size: .74rem; color: var(--muted); border-bottom: 1px dotted currentColor; }
.ss-link:hover { color: var(--teal); }
.stats-strip.ss-stale .ss-v { opacity: .55; }
@media (max-width: 1760px) and (min-width: 1000px) {
  .ss-sym, .ss-link, [data-s="volSub"] { display: none; }
}
@media (max-width: 1500px) and (min-width: 1000px) {
  [data-s="athSub"] { display: none; }
  .ss-row { gap: .75rem; }
}
.brand { margin-right: auto; }
.brand img { height: 44px; width: auto; }
.nav-links { display: flex; gap: 1.6rem; font-weight: 700; font-size: .9rem; }
.nav-links a:hover { color: var(--teal); }
.nav-cta { padding: .7em 1.4em; }
.nav-toggle { display: none; background: none; border: 0; font-size: 1.6rem; cursor: pointer; color: var(--teal); }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 0; background: #000; }
.hero-video { width: 100%; aspect-ratio: 1264 / 720; max-height: calc(100vh - 170px); object-fit: contain; background: #000; }
/* buttons sit on a strip under the video so they never cover the artwork */
.hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem; padding: 1.8rem 16px 2.2rem; }
.ca {
  font-family: var(--mono); font-weight: 700; font-size: clamp(.75rem, 2.5vw, .95rem); letter-spacing: .06em;
  color: #fff; background: rgba(0, 18, 20, .85); border: 1px dashed var(--teal); border-radius: 4px;
  padding: .8em 1.3em; max-width: 100%; word-break: break-all; cursor: pointer; transition: transform .15s;
}
.ca:hover { transform: translateY(-2px); }
.ca span { color: var(--teal); }

/* ---------- Graffiti bubble buttons (hero) ---------- */
/* chunky blob shape + dark sticker outline + glossy highlight + paint drip, like the logo lettering */
.bubble {
  --fill: var(--teal); --ink: #001214; --rim: #001214; --tilt: -2deg;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  font-family: "Rubik Bubbles", var(--display); font-size: clamp(1.05rem, 2.4vw, 1.35rem); letter-spacing: .03em; line-height: 1;
  padding: .85em 1.6em .9em; color: var(--ink); background: var(--fill);
  border: 4px solid var(--rim);
  border-radius: 46px 38px 50px 34px / 40px 48px 34px 46px;
  box-shadow:
    0 0 0 3px var(--teal),                 /* outer sticker ring */
    0 7px 0 3px #00393b,                   /* chunky 3D underside */
    inset 0 -7px 0 rgba(0, 0, 0, .18),     /* shading at the bottom of the bubble */
    0 10px 28px rgba(1, 246, 249, .35);    /* glow */
  transform: rotate(var(--tilt));
  transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s;
  cursor: pointer;
}
/* glossy highlight */
.bubble::before {
  content: ""; position: absolute; top: 9%; left: 9%; width: 30%; height: 26%;
  border-radius: 50%; background: rgba(255, 255, 255, .55); transform: rotate(-12deg); pointer-events: none;
}
/* paint drip hanging off the bottom */
/* the drip is drawn as one shape whose top is open, so the bubble's outline flows into it */
.bubble::after {
  content: ""; position: absolute; left: calc(68% - 21px); top: calc(100% - 5px); width: 42px; height: 38px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%22-8%200%2042%2038%22%20width=%2242%22%20height=%2238%22%3E%20%3Cdefs%3E%3CclipPath%20id=%22r%22%3E%3Crect%20x=%22-8%22%20y=%225%22%20width=%2242%22%20height=%2240%22/%3E%3C/clipPath%3E%3CclipPath%20id=%22m%22%3E%3Crect%20x=%22-8%22%20y=%221%22%20width=%2242%22%20height=%2240%22/%3E%3C/clipPath%3E%3C/defs%3E%20%3Cpath%20d=%22M8%200%20L8%2013%20C8%2017%206%2018%206%2022%20A7%207%200%200%200%2020%2022%20C20%2018%2018%2017%2018%2013%20L18%200%22%20fill=%22none%22%20stroke=%22%2301f6f9%22%20stroke-width=%2214%22%20stroke-linejoin=%22round%22%20clip-path=%22url%28%23r%29%22/%3E%20%3Cpath%20d=%22M8%200%20L8%2013%20C8%2017%206%2018%206%2022%20A7%207%200%200%200%2020%2022%20C20%2018%2018%2017%2018%2013%20L18%200%22%20fill=%22none%22%20stroke=%22%23001214%22%20stroke-width=%228%22%20stroke-linejoin=%22round%22%20clip-path=%22url%28%23m%29%22/%3E%20%3Cpath%20d=%22M8%200%20L8%2013%20C8%2017%206%2018%206%2022%20A7%207%200%200%200%2020%2022%20C20%2018%2018%2017%2018%2013%20L18%200%20Z%22%20fill=%22%2301f6f9%22/%3E%20%3Cellipse%20cx=%2210.5%22%20cy=%2222%22%20rx=%221.6%22%20ry=%222.6%22%20fill=%22%23ffffff%22%20opacity=%22.5%22/%3E%20%3C/svg%3E") no-repeat center / 100% 100%; pointer-events: none;
}
.bubble:hover { transform: rotate(0deg) scale(1.06); box-shadow: 0 0 0 3px var(--teal), 0 9px 0 3px #00393b, inset 0 -7px 0 rgba(0, 0, 0, .18), 0 14px 34px rgba(1, 246, 249, .5); }
.bubble:active { transform: rotate(0deg) scale(.97) translateY(4px); box-shadow: 0 0 0 3px var(--teal), 0 3px 0 3px #00393b, inset 0 -5px 0 rgba(0, 0, 0, .18); }
.bubble:focus-visible { outline: 3px dashed #fff; outline-offset: 8px; }
.bubble-dark { --fill: #08201f; --ink: #fff; --rim: var(--teal); --tilt: 1.5deg; font-size: clamp(.95rem, 2vw, 1.15rem); box-shadow: 0 0 0 3px #001214, 0 7px 0 3px #00393b, inset 0 -6px 0 rgba(0, 0, 0, .3), 0 10px 26px rgba(1, 246, 249, .2); }
.bubble-dark::before { background: rgba(255, 255, 255, .18); }
.bubble-dark::after { left: calc(24% - 21px); background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%22-8%200%2042%2038%22%20width=%2242%22%20height=%2238%22%3E%20%3Cdefs%3E%3CclipPath%20id=%22r%22%3E%3Crect%20x=%22-8%22%20y=%225%22%20width=%2242%22%20height=%2240%22/%3E%3C/clipPath%3E%3CclipPath%20id=%22m%22%3E%3Crect%20x=%22-8%22%20y=%221%22%20width=%2242%22%20height=%2240%22/%3E%3C/clipPath%3E%3C/defs%3E%20%3Cpath%20d=%22M8%200%20L8%2013%20C8%2017%206%2018%206%2022%20A7%207%200%200%200%2020%2022%20C20%2018%2018%2017%2018%2013%20L18%200%22%20fill=%22none%22%20stroke=%22%23001214%22%20stroke-width=%2214%22%20stroke-linejoin=%22round%22%20clip-path=%22url%28%23r%29%22/%3E%20%3Cpath%20d=%22M8%200%20L8%2013%20C8%2017%206%2018%206%2022%20A7%207%200%200%200%2020%2022%20C20%2018%2018%2017%2018%2013%20L18%200%22%20fill=%22none%22%20stroke=%22%2301f6f9%22%20stroke-width=%228%22%20stroke-linejoin=%22round%22%20clip-path=%22url%28%23m%29%22/%3E%20%3Cpath%20d=%22M8%200%20L8%2013%20C8%2017%206%2018%206%2022%20A7%207%200%200%200%2020%2022%20C20%2018%2018%2017%2018%2013%20L18%200%20Z%22%20fill=%22%2308201f%22/%3E%20%3Cellipse%20cx=%2210.5%22%20cy=%2222%22%20rx=%221.6%22%20ry=%222.6%22%20fill=%22%23ffffff%22%20opacity=%22.5%22/%3E%20%3C/svg%3E"); }
.bubble small { font-family: var(--mono); font-size: .55em; font-weight: 700; opacity: .65; }
/* CA as a softer bubble so the address stays easy to read */
.bubble-ca { border: 3px solid var(--teal); border-radius: 30px 24px 32px 22px / 26px 32px 22px 30px; padding: .8em 1.4em; transform: rotate(-.8deg); box-shadow: 0 5px 0 #00393b, 0 8px 22px rgba(1, 246, 249, .18); }
.bubble-ca:hover { transform: rotate(0deg) translateY(-2px); }
.hero-ctas { gap: 1.6rem; }

/* ---------- Divider: badge rolls along the line as you scroll, lighting it up ---------- */
@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }
.divider { padding: 1.4rem clamp(16px, 5vw, 4rem); background: var(--bg); overflow: hidden; }
.divider-track { --badge: 64px; --p: 0; position: relative; height: 76px; transition: --p .35s cubic-bezier(.22, 1, .36, 1); }
.divider-track::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%);
  background: repeating-linear-gradient(90deg, rgba(1, 246, 249, .3) 0 10px, transparent 10px 18px);
}
.divider-fill {
  position: absolute; left: 0; top: 50%; height: 3px; transform: translateY(-50%);
  width: calc(var(--p) * (100% - var(--badge)) + var(--badge) / 2);
  background: linear-gradient(90deg, transparent, var(--teal) 25%);
  box-shadow: 0 0 12px var(--teal), 0 0 28px rgba(1, 246, 249, .5);
  border-radius: 2px;
}
.divider-badge {
  position: absolute; top: 50%; left: calc(var(--p) * (100% - var(--badge)));
  width: var(--badge); height: var(--badge); border-radius: 50%;
  box-shadow: 0 0 18px rgba(1, 246, 249, .55);
  transform: translateY(-50%) rotate(calc(var(--p) * 720deg));
}
.divider-badge img { width: 100%; height: 100%; border-radius: 50%; }
.divider-badge::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--teal); opacity: 0; }
.divider.hit .divider-badge::after { animation: ring .9s ease-out; }
@keyframes ring { from { transform: scale(1); opacity: .9; } to { transform: scale(2.2); opacity: 0; } }

/* ---------- Sections ---------- */
section { padding: clamp(4rem, 9vw, 7rem) clamp(16px, 5vw, 4rem); }
.eyebrow { font-family: var(--mono); color: var(--teal); letter-spacing: .2em; font-size: .8rem; font-weight: 700; margin-bottom: .8rem; }
.section-title { font-family: var(--display); font-style: italic; font-size: clamp(3rem, 9vw, 6.5rem); line-height: .95; margin-bottom: 1.5rem; text-wrap: balance; }
.lede { font-size: clamp(1.1rem, 2.4vw, 1.4rem); line-height: 1.55; max-width: 34ch; }
.fine { font-family: var(--mono); font-size: .8rem; color: var(--muted); }

/* ---------- About ---------- */
.about { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; max-width: 1200px; margin: 0 auto; }
.about-mascot { width: 100%; max-width: 520px; justify-self: center; filter: drop-shadow(0 0 40px rgba(1, 246, 249, .25)); }
.facts { list-style: none; display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }
.facts li { font-family: var(--mono); font-size: .85rem; padding: .6rem 1rem; border: 1px solid var(--teal-dark); border-radius: 999px; color: var(--muted); }
.facts b { color: var(--teal); }

/* ---------- Live tax ---------- */
.tax { background: var(--bg-2); display: grid; grid-template-columns: 1fr minmax(0, 440px); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.tax > * { max-width: 600px; justify-self: center; width: 100%; }
.tax-copy > p:not(.fine) { font-size: 1.1rem; line-height: 1.6; margin-bottom: 1rem; max-width: 40ch; }
/* the mascot is anchored to the chart card's left edge and steps over it for depth */
.tax { align-items: start; }
.tax-side { position: relative; }
/* "Why NEAR?" write-up under the Live Tax intro.
   Right padding keeps it clear of the mascot, who reaches into this column from the chart side
   (mascot width − 96px overlap onto the chart − column gap). */
.tax-copy { justify-self: start; }
.why-near { margin-top: 2.6rem; padding-right: max(0px, calc(clamp(300px, 28vw, 420px) - 96px - clamp(2rem, 5vw, 4rem) + 1.5rem)); }
.why-title { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(2rem, 4vw, 3rem); line-height: 1; margin-bottom: .9rem; }
.why-lede { font-size: 1rem; line-height: 1.65; color: #d7e4e4; max-width: 46ch; margin-bottom: 1.4rem; }
.why-list { list-style: none; display: grid; gap: 1rem; max-width: 46ch; }
.why-list li { position: relative; padding-left: 1.4rem; font-size: .95rem; line-height: 1.6; color: #b9cccd; }
.why-list li::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 11px; background: var(--teal); border-radius: 50% 50% 50% 50% / 35% 35% 65% 65%; box-shadow: 0 0 8px rgba(1, 246, 249, .6); } /* little teal drop */
.why-list b { color: #fff; font-weight: 700; }
.why-list code { font-family: var(--mono); font-size: .85em; color: var(--teal); background: rgba(1, 246, 249, .08); padding: .1em .35em; border-radius: 4px; overflow-wrap: anywhere; }

.tax-mascot {
  position: absolute; z-index: 3; bottom: -12px; right: calc(100% - 96px);
  width: clamp(300px, 28vw, 420px); max-width: none;
  filter: drop-shadow(14px 22px 24px rgba(0, 0, 0, .7)) drop-shadow(0 0 30px rgba(1, 246, 249, .18));
  pointer-events: none;
}
/* theme the widget: brand teal for holders, BTC gold for creator, violet for burn (checked for colourblind separation) */
.tax-side { display: flex; flex-direction: column; gap: 1rem; max-width: 440px; width: 100%; justify-self: center; }
/* small live market-cap chart card (matches the tax widget) */
.mc-card { background: #050c0c; border: 1px solid #163334; border-radius: 16px; padding: 1rem 1rem .8rem; font-family: var(--mono); }
.mc-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .5rem; }
.mc-title { font-size: .72rem; letter-spacing: .14em; color: #8fa6a7; }
.mc-title b { color: #fff; letter-spacing: 0; font-size: .95rem; margin-left: .35rem; font-variant-numeric: tabular-nums; }
.mc-tfs { display: flex; gap: .15rem; }
.mc-tf { font-family: var(--mono); font-size: .68rem; font-weight: 700; color: #8fa6a7; background: none; border: 0; padding: .3rem .45rem; border-radius: 4px; cursor: pointer; }
.mc-tf.active { color: #001214; background: var(--teal); }
.mc-tf:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.mc-plot { height: 210px; }
.mc-foot { display: flex; justify-content: space-between; align-items: center; margin-top: .5rem; font-size: .68rem; color: #8fa6a7; }
.mc-foot a:hover { color: var(--teal); }
.mc-status::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #5fd08a; margin-right: .4rem; vertical-align: middle; }
.mc-card.mc-stale .mc-status::before { background: #e8c547; }
.tax .tw { --tw-bg: #050c0c; --tw-line: #163334; --tw-muted: #8fa6a7; --tw-accent: var(--teal); --tw-creator: #bf8300; --tw-burn: #9b6bff; --tw-holders: #00a9ad; max-width: 440px; box-shadow: 0 0 60px rgba(1, 246, 249, .12); }

/* ---------- City video ---------- */
/* soft fades at the top and bottom so the video melts into the sections around it */
.video-band { position: relative; padding: 0; background: #000; }
.video-band video { width: 100%; aspect-ratio: 1264 / 720; max-height: 85vh; object-fit: cover; }
.video-band::before, .video-band::after { content: ""; position: absolute; left: 0; right: 0; height: var(--fade-h, clamp(80px, 14vw, 220px)); pointer-events: none; z-index: 1; }
/* --fade-top / --fade-bottom = background colour of the section above / below the band */
.video-band { --fade-top: var(--bg-2); --fade-bottom: var(--bg); }
.video-band::before { top: 0; background: linear-gradient(to bottom, var(--fade-top) 0%, color-mix(in srgb, var(--fade-top) 60%, transparent) 45%, transparent 100%); }
.video-band::after { bottom: 0; background: linear-gradient(to top, var(--fade-bottom) 0%, color-mix(in srgb, var(--fade-bottom) 60%, transparent) 45%, transparent 100%); }
.band-about::before, .band-about::after { content: none; } /* no fade on this one: the artwork runs edge to edge */

/* ---------- Join ---------- */
.join { text-align: center; }
.join-kicker { font-family: var(--display); font-style: italic; font-size: clamp(3rem, 9vw, 6rem); line-height: 1; }
.join-logo { width: min(100%, 760px); margin: .5rem auto 2.5rem; filter: drop-shadow(0 0 30px rgba(1, 246, 249, .3)); }
.socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.social { font-family: var(--mono); font-weight: 700; font-size: .85rem; border: 2px solid #1c3536; padding: 1.1rem 1.6rem; border-radius: 6px; color: #6f8788; transition: .2s; }
.social:not([aria-disabled]) { color: #fff; border-color: #2b5254; }
.social small { font-size: .65rem; margin-left: .5rem; opacity: .6; }
.social:hover { border-color: var(--teal); color: var(--teal); }
.social.hot { border-color: var(--teal); background: var(--teal); color: #001214; }
.social.hot:hover { background: #fff; border-color: #fff; color: #001214; }

/* ---------- PFP generator ---------- */
.pfp { background: var(--bg-2); border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.pfp > * { max-width: 560px; justify-self: center; width: 100%; }
.pfp-copy > p { line-height: 1.7; margin-bottom: 1.5rem; color: #d7e4e4; }
.seg { display: inline-flex; border: 2px solid var(--teal); border-radius: 4px; overflow: hidden; margin-bottom: 1.2rem; }
.seg-btn { font-family: var(--mono); font-weight: 700; font-size: .8rem; padding: .6rem 1.1rem; border: 0; background: transparent; color: var(--teal); cursor: pointer; }
.seg-btn.active { background: var(--teal); color: #001214; }
.ctrl { display: grid; grid-template-columns: 90px 1fr 44px; align-items: center; gap: .8rem; font-family: var(--mono); font-size: .8rem; font-weight: 700; margin-bottom: .8rem; }
.ctrl input { accent-color: var(--teal); width: 100%; }
.hint { font-size: .8rem; color: var(--muted) !important; margin: .5rem 0 1.4rem !important; }
.pfp-btns { display: flex; gap: .8rem; flex-wrap: wrap; }
#pfpCanvas { width: 100%; aspect-ratio: 1; border-radius: 8px; border: 2px solid var(--teal); background: #0b1414; cursor: grab; touch-action: none; box-shadow: 0 0 50px rgba(1, 246, 249, .2); }
#pfpCanvas:active { cursor: grabbing; }

/* ---------- Footer + toast ---------- */
/* footer is pure black so the video's own black background disappears into it */
.foot-video { width: min(160px, 45vw); margin: 0 auto 1.2rem; }
.foot { text-align: center; padding: 2.5rem 16px; font-family: var(--mono); font-size: .75rem; color: var(--muted); background: #000; border-top: 1px solid var(--line); }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 120px); background: var(--teal); color: #001214; font-family: var(--mono); font-weight: 700; padding: .8rem 1.4rem; border-radius: 4px; transition: transform .3s; z-index: 100; }
.toast.show { transform: translate(-50%, 0); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .tax-copy { justify-self: center; }
  .why-near { padding-right: 0; text-align: left; }
  .why-lede, .why-list { margin-inline: auto; }
  .about, .tax, .pfp { grid-template-columns: 1fr; }
  .about-copy, .tax-copy { text-align: center; }
  .lede, .tax-copy > p:not(.fine) { margin-inline: auto; }
  .facts { justify-content: center; }
  .tax-mascot { display: none; }
  .about-mascot { max-width: 360px; }
}
@media (max-width: 720px) {
  .nav { gap: 1rem; }
  .brand img { height: 34px; }
  .nav-cta { display: none; }
  .nav-toggle { display: block; }
  .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background: var(--bg); padding: 1rem 16px 1.4rem; border-bottom: 2px solid var(--teal); }
  .nav-links.open { display: flex; }
  .hero-ctas { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .bubble, .bubble-ca { transform: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .divider-track { --p: .5 !important; }
}