/* VORTEX — BNB yellow on near black. Pandora's structure, none of its phosphor cyan or
   Poppins: this is geometric, warmer, and the artwork spins rather than bursts. */

:root{
  --bg:#000000;
  --bg-2:#0f1113;
  --panel:#141619;
  --ink:#f5f2ea;
  --dim:#8e8d88;
  --dimmer:#5a5955;
  --line:#22252a;
  --gold:#F3BA2F;          /* BNB yellow, the one accent */
  --gold-bright:#FCD535;
  --gold-deep:#7a5f10;
  --display:"Sora",system-ui,-apple-system,sans-serif;
  --text:"Inter Tight",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--text);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,canvas{max-width:100%;display:block}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:700;letter-spacing:-.035em;
  line-height:1}

.wrap{width:min(1200px,100% - 44px);margin-inline:auto}

/* ---- the ground ---------------------------------------------------------------------- */
/* A drawn ground rather than a photographed one: a faint measured grid, the way a
   schematic sits on graph paper, and nothing else. */
.field{position:fixed;inset:0;z-index:-2;pointer-events:none;background:var(--bg)}
.field::after{content:"";position:absolute;inset:-2px;
  background-image:
    linear-gradient(rgba(243,186,47,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(243,186,47,.045) 1px,transparent 1px);
  background-size:76px 76px;
  mask-image:radial-gradient(120% 90% at 50% 34%,#000 18%,transparent 82%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 34%,#000 18%,transparent 82%)}

/* ---- header ------------------------------------------------------------------------ */
header{position:sticky;top:0;z-index:80;height:74px;display:flex;align-items:center;
  gap:28px;padding:0 24px;background:rgba(8,9,10,.84);backdrop-filter:blur(13px);
  border-bottom:1px solid var(--line)}
.wordmark{display:flex;align-items:center;gap:11px;font-family:var(--display);
  font-weight:700;font-size:22px;letter-spacing:-.04em}
.wordmark img{width:29px;height:29px;animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.wordmark b{color:var(--gold)}
nav{margin-left:auto;display:flex;align-items:center;gap:26px;font-size:14.5px;
  color:var(--dim)}
nav a:hover{color:var(--ink)}
.navpill{padding:11px 20px;border-radius:10px;background:var(--gold);color:#241a00;
  font-weight:600;font-size:14.5px}
.navpill:hover{background:var(--gold-bright);color:#241a00}

/* ---- hero ---------------------------------------------------------------------- */
.hero{position:relative;min-height:calc(100vh - 74px);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:clamp(30px,5vh,60px);
  padding:clamp(50px,8vh,100px) 22px clamp(40px,6vh,72px);text-align:center;overflow:hidden}

/* the swarm sits behind the type, screened so its black drops out, masked so it has no
   edge, and held back enough that the headline still wins */
.swirl{position:absolute;left:50%;top:48%;translate:-50% -50%;
  width:min(1240px,132vw);pointer-events:none;mix-blend-mode:screen;opacity:.8}
.swirl img{width:100%;height:auto;display:block;
  mask-image:radial-gradient(closest-side,#000 34%,rgba(0,0,0,.6) 64%,transparent 92%);
  -webkit-mask-image:radial-gradient(closest-side,#000 34%,rgba(0,0,0,.6) 64%,transparent 92%)}

.hero-copy{position:relative;z-index:2;max-width:min(960px,92vw)}
h1{font-size:clamp(44px,7.2vw,100px);letter-spacing:-.05em;line-height:.93;
  max-width:14ch;margin-inline:auto}
h1 em{font-style:normal;color:var(--gold)}
.sub{margin:26px auto 0;max-width:52ch;font-size:clamp(16.5px,1.4vw,19px);color:var(--dim)}
.sub b{color:var(--ink);font-weight:500}
.cta{display:flex;gap:11px;flex-wrap:wrap;justify-content:center;margin-top:32px}
.pill{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:12px;
  background:var(--gold);color:#241a00;font-weight:600;font-size:16px}
.pill:hover{background:var(--gold-bright)}
.pill.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.pill.ghost:hover{border-color:var(--gold);color:var(--gold);background:transparent}

/* the three chains, stated plainly under the fold line rather than orbiting */
.chainrow{position:relative;z-index:2;display:flex;gap:10px;flex-wrap:wrap;
  justify-content:center}
.chainrow span{display:flex;align-items:center;gap:10px;padding:10px 18px 10px 10px;
  border-radius:999px;background:rgba(20,22,25,.72);border:1px solid var(--line);
  backdrop-filter:blur(6px);font-size:14.5px}
.chainrow img{width:24px;height:24px;border-radius:50%;background:#fff;padding:2px}
.chainrow b{font-weight:500}


/* ---- bands ------------------------------------------------------------------------- */
.band{padding:94px 0;border-top:1px solid var(--line)}
.band h2{font-size:clamp(30px,4.3vw,52px);line-height:1.04;max-width:20ch}
.band h2 em{font-style:normal;color:var(--gold)}
.lede{margin:20px 0 0;max-width:64ch;color:var(--dim);font-size:17.5px;line-height:1.62}
.lede b{color:var(--ink);font-weight:500}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:52px}
.step{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:26px 24px 28px;transition:border-color .25s,transform .35s cubic-bezier(.2,.7,.2,1)}
.step:hover{border-color:var(--gold-deep);transform:translateY(-3px)}
.step .n{font-family:var(--mono);font-size:12px;color:var(--gold);margin-bottom:16px}
.step h3{font-size:19.5px;letter-spacing:-.025em;margin-bottom:9px;line-height:1.2}
.step p{margin:0;color:var(--dim);font-size:15px}

.grid2{display:grid;grid-template-columns:repeat(2,1fr);margin-top:44px;
  border-top:1px solid var(--line)}
.grid2 > div{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:16px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--dim)}
.grid2 > div:nth-child(odd){padding-right:30px;border-right:1px solid var(--line)}
.grid2 > div:nth-child(even){padding-left:30px}
.grid2 b{font-family:var(--mono);font-size:14px;font-weight:400;color:var(--ink);
  text-align:right}
.grid2 b.on{color:var(--gold)}

.qa{max-width:64ch;margin-top:36px}
.qa p{color:var(--dim);margin:0 0 20px}
.qa b{display:block;color:var(--ink);font-weight:600;margin-bottom:3px}

footer{border-top:1px solid var(--line);padding:32px 0;color:var(--dimmer);font-size:14px}
footer .wrap{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
footer a:hover{color:var(--gold)}

/* ---- reveal -------------------------------------------------------------------------- */
/* Visible unless javascript has actually started: hiding first and hoping a script turns
   it back on ships a blank page to anyone whose js is slow, blocked or broken. */
html.js [data-in]{opacity:0;transform:translateY(18px);
  transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1)}
html.js [data-in].seen{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html.js [data-in]{opacity:1;transform:none;transition:none}
  .wordmark img{animation:none}
    html{scroll-behavior:auto}
}

@media(max-width:940px){
  .hero-stage{grid-template-columns:1fr;gap:34px}
    .steps{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .grid2 > div:nth-child(odd){padding-right:0;border-right:0}
  .grid2 > div:nth-child(even){padding-left:0}
  nav .hide-sm{display:none}
}

/* ---- the unfold: a pinned section where scroll is the clock --------------------------- */
.unfold{position:relative;height:340vh;border-top:1px solid var(--line)}
.unfold .pin{position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0}
/* full bleed: the clip is the section, not a picture sitting inside it */
.unfold .stagewrap{position:absolute;inset:0;width:100%;height:100%}
#unfoldCanvas{position:absolute;inset:0;width:100%;height:100%}
/* the chains sit in one aligned row and arrive in order. anchoring pills onto the
   artwork meant guessing coordinates inside a generated file, which is how labels end up
   floating on nothing. */
.ustrip{position:absolute;left:0;right:0;bottom:clamp(38px,7vh,82px);z-index:5;
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;padding:0 22px}
.ub{display:flex;align-items:center;gap:10px;padding:10px 20px 10px 10px;border-radius:999px;
  background:rgba(20,22,25,.78);border:1px solid var(--line);backdrop-filter:blur(6px);
  font-size:14.5px;white-space:nowrap;opacity:0;transform:translateY(14px);
  transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1)}
.ub.in{opacity:1;transform:none}
.ub img{width:24px;height:24px;border-radius:50%;background:#fff;padding:2px}
.ub b{font-weight:500}

/* the captions swap in place, so the block reserves its own height instead of being
   taken out of flow and letting the stage drift to the top of the pin */
/* the caption owns the top band and the badges are kept out of it, or a pill lands on
   top of the headline the moment an arm points that way */
.ucaps{position:absolute;left:0;right:0;top:clamp(106px,13vh,164px);text-align:center;
  pointer-events:none;padding:0 22px;z-index:5}
.ucaps::after{content:"";position:absolute;left:50%;top:-40vh;translate:-50% 0;
  width:150vw;height:62vh;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,9,10,.92) 34%,rgba(8,9,10,.55) 68%,transparent)}
.ucap{position:absolute;left:22px;right:22px;top:0;opacity:0;transform:translateY(10px);
  transition:opacity .45s cubic-bezier(.2,.7,.2,1),transform .45s cubic-bezier(.2,.7,.2,1)}
.ucap.on{opacity:1;transform:none}
.ucap b{display:block;font-family:var(--display);font-weight:700;letter-spacing:-.04em;
  font-size:clamp(32px,4.6vw,62px);line-height:1.02;text-shadow:0 4px 40px rgba(0,0,0,.85)}
.ucap b em{font-style:normal;color:var(--gold)}
.ucap span{display:block;margin:14px auto 0;max-width:46ch;color:var(--ink);opacity:.72;
  font-size:17px;text-shadow:0 2px 20px rgba(0,0,0,.9)}

/* ---- figures + notes, the mechanics band --------------------------------------------- */
.figs{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:46px}
.figs > div{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:26px 22px}
.figs b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(30px,3.6vw,46px);
  letter-spacing:-.04em;color:var(--gold);line-height:1}
.figs span{display:block;margin-top:10px;color:var(--dim);font-size:14.5px}

.notes{margin-top:34px;display:grid;gap:16px;max-width:74ch}
.notes p{margin:0;color:var(--dim);font-size:16px;padding-left:18px;
  border-left:2px solid var(--line)}
.notes em{font-style:normal;color:var(--ink);font-weight:500}

@media(max-width:940px){
  .figs{grid-template-columns:repeat(2,1fr)}
  .unfold{height:300vh}
  .ucaps{top:10px}
}
@media(prefers-reduced-motion:reduce){
  .unfold{height:auto}
  .unfold .pin{position:static;height:auto;padding:70px 0}
  .ucap{position:static;opacity:1;transform:none}
  .ucap + .ucap{display:none}
}

/* the scrubbed clip sits under the badges; the canvas stays as a fallback that only
   paints if the video never became usable */
/* The clip is glowing filaments on its own black, and that black is a shade lighter than
   the page, so any opaque video sits in the layout as a visible grey rectangle. Screen
   blending drops pure black to nothing and keeps only the light, so the vortex floats on
   the page with no box around it and no mask needed to hide an edge. */
#unfoldArt{position:absolute;left:50%;top:60%;translate:-50% -50%;
  width:min(700px,66vw);height:auto;transform-origin:50% 50%;will-change:transform}

/* ---- figures + notes, the mechanics band --------------------------------------------- */
.figs{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:46px}
.figs > div{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:26px 22px}
.figs b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(30px,3.6vw,46px);
  letter-spacing:-.04em;color:var(--gold);line-height:1}
.figs span{display:block;margin-top:10px;color:var(--dim);font-size:14.5px}

.notes{margin-top:34px;display:grid;gap:16px;max-width:74ch}
.notes p{margin:0;color:var(--dim);font-size:16px;padding-left:18px;
  border-left:2px solid var(--line)}
.notes em{font-style:normal;color:var(--ink);font-weight:500}

@media(max-width:940px){
  .figs{grid-template-columns:repeat(2,1fr)}
  .unfold{height:300vh}
  .ucaps{top:10px}
}
@media(prefers-reduced-motion:reduce){
  .unfold{height:auto}
  .unfold .pin{position:static;height:auto;padding:70px 0}
  .ucap{position:static;opacity:1;transform:none}
  .ucap + .ucap{display:none}
}

/* the scrubbed clip sits under the badges; the canvas stays as a fallback that only
   paints if the video never became usable */
/* The clip is glowing filaments on its own black, and that black is a shade lighter than
   the page, so any opaque video sits in the layout as a visible grey rectangle. Screen
   blending drops pure black to nothing and keeps only the light, so the vortex floats on
   the page with no box around it and no mask needed to hide an edge. */
/* Two different problems, two different tools.
   Screen drops the clip's black so it does not sit in a grey panel.
   The mask fades the bright filaments, which run right to the edge of the frame and would
   otherwise end on a hard crop line no blend mode can soften. */
.uvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity .6s linear;mix-blend-mode:screen;object-position:50% 50%;
  transform:scale(1.06);
  mask-image:radial-gradient(76% 82% at 50% 50%,#000 44%,rgba(0,0,0,.7) 72%,transparent 97%);
  -webkit-mask-image:radial-gradient(76% 82% at 50% 50%,#000 44%,rgba(0,0,0,.7) 72%,transparent 97%);
  mask-mode:alpha}
.uvid.ready{opacity:1}
.uvid.ready ~ #unfoldCanvas{opacity:0}
#unfoldCanvas{transition:opacity .4s linear}

/* ---- the app ------------------------------------------------------------------------- */
.appwrap{width:min(620px,100% - 40px);margin:52px auto 100px}
/* one centred column, so the form sits in the middle of the page rather than
   leaving an empty half the background shows through */
.appgrid{display:block}
/* transparent, so the artwork behind stays visible through the form */
.board{background:transparent;border:0;border-radius:0;padding:0}
.board + .board{margin-top:38px;padding-top:30px;border-top:1px solid var(--line)}
.board h3{font-size:19px;letter-spacing:-.025em;margin-bottom:5px}
.board .hint{color:var(--dim);font-size:14.5px;margin:0 0 20px}

.fieldrow{margin-bottom:14px}
.fieldrow label{display:block;font-size:13px;color:var(--dim);margin-bottom:7px}
.fieldrow input{width:100%;background:rgba(18,20,23,.72);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:11px;
  padding:13px 15px;color:var(--ink);font:inherit;font-size:16px;outline:none;
  transition:border-color .18s}
.fieldrow input:focus{border-color:var(--gold-deep)}
.fieldrow input::placeholder{color:#3f3f42}

.pick{display:flex;gap:9px;flex-wrap:wrap}
.chip-pick{display:flex;align-items:center;gap:9px;padding:10px 16px 10px 10px;
  border-radius:999px;background:rgba(18,20,23,.72);backdrop-filter:blur(6px);
  border:1px solid var(--line);cursor:pointer;
  font-size:14.5px;transition:border-color .18s}
.chip-pick:has(input:checked){border-color:var(--gold-deep)}
.chip-pick[data-off]{opacity:.5;cursor:default}
.chip-pick input{accent-color:var(--gold);width:15px;height:15px}
.chip-pick img{width:22px;height:22px;border-radius:50%;background:#fff;padding:2px}
.chip-pick em{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--dimmer)}

.go{width:100%;margin-top:22px;font:inherit;font-size:15.5px;font-weight:600;cursor:pointer;
  padding:15px;border-radius:12px;border:1px solid var(--gold);background:var(--gold);
  color:#241a00;transition:.18s}
.go:hover:not(:disabled){background:var(--gold-bright)}
.go:disabled{background:transparent;color:var(--dimmer);border-color:var(--line);cursor:default}

.msg{margin-top:14px;font-size:14px;color:var(--dim)}
.rows2{display:grid}
.rows2 > div{display:flex;justify-content:space-between;gap:16px;padding:13px 0;
  border-bottom:1px solid var(--line);font-size:14px;color:var(--dim)}
.rows2 > div:last-child{border-bottom:0}
.rows2 b{font-family:var(--mono);font-size:13.5px;font-weight:400;color:var(--ink);text-align:right}
.rows2 b.on{color:var(--gold)}




/* the app screen gets the same schematic, very faint, so the form is not floating on a
   flat rectangle of nothing */
.appglow{position:fixed;left:50%;top:46%;translate:-50% -50%;width:min(1150px,125vw);
  z-index:-1;pointer-events:none;mix-blend-mode:screen;opacity:.38}
.appglow img{width:100%;height:auto;display:block;
  mask-image:radial-gradient(closest-side,#000 32%,rgba(0,0,0,.55) 62%,transparent 92%);
  -webkit-mask-image:radial-gradient(closest-side,#000 32%,rgba(0,0,0,.55) 62%,transparent 92%)}

/* ---- logo picker and the when switch --------------------------------------------- */
.drop{display:flex;align-items:center;justify-content:center;gap:12px;min-height:104px;
  padding:16px;border:1px dashed #2c3036;border-radius:13px;
  background:rgba(18,20,23,.72);backdrop-filter:blur(6px);
  cursor:pointer;color:var(--dim);font-size:14.5px;text-align:center;
  transition:border-color .18s,background .18s}
.drop:hover,.drop.over{border-color:var(--gold-deep);background:var(--panel-2)}
.drop img{width:60px;height:60px;border-radius:12px;object-fit:cover;background:#fff}
.note{margin:8px 0 0;font-size:12.5px;color:var(--dimmer)}
.note.bad{color:#e0715f}

.seg{display:flex;gap:5px;background:rgba(18,20,23,.72);backdrop-filter:blur(6px);
  border:1px solid var(--line);
  border-radius:11px;padding:4px}
.seg button{flex:1;font:inherit;font-size:14px;font-weight:500;cursor:pointer;padding:10px;
  border:0;border-radius:8px;background:transparent;color:var(--dim);transition:.15s}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--panel-2);color:var(--ink)}

/* ---- whats live ---------------------------------------------------------------------- */
.livehead{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:34px}
.filters{display:flex;gap:6px;background:var(--bg);border:1px solid var(--line);
  border-radius:11px;padding:4px}
.filters button{display:flex;align-items:center;gap:8px;font:inherit;font-size:14px;
  font-weight:500;cursor:pointer;padding:9px 15px;border:0;border-radius:8px;
  background:transparent;color:var(--dim);transition:.15s}
.filters button:hover{color:var(--ink)}
.filters button.on{background:var(--panel-2);color:var(--ink)}
.filters img{width:18px;height:18px;border-radius:50%;background:#fff;padding:1px}

.tokens{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:12px;
  margin-top:20px}
.tokens:empty{display:none}
.token{display:flex;align-items:center;gap:13px;padding:15px 18px;border-radius:14px;
  background:var(--panel);border:1px solid var(--line);
  transition:border-color .2s,transform .3s cubic-bezier(.2,.7,.2,1)}
.token:hover{border-color:var(--gold-deep);transform:translateY(-2px)}
.tlogo{width:40px;height:40px;border-radius:50%;background:#fff;flex:none;display:grid;
  place-items:center;overflow:hidden;font-family:var(--mono);font-size:11px;color:#111}
.tlogo img{width:100%;height:100%;object-fit:cover}
.tname{display:flex;flex-direction:column;min-width:0}
.tname b{font-weight:500;font-size:15.5px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.tname em{font-style:normal;font-size:13px;color:var(--dim)}
.tchains{display:flex;margin-left:auto}
.tchains img{width:22px;height:22px;border-radius:50%;background:#fff;padding:1px;
  border:1.5px solid var(--panel)}
.tchains img + img{margin-left:-8px}
.taddr{font-family:var(--mono);font-size:11.5px;color:var(--dimmer);flex:none}

.empty{margin-top:24px;max-width:56ch;color:var(--dim);font-size:16px;
  padding:22px;border:1px dashed #2a2e34;border-radius:14px}

@media(max-width:620px){ .taddr{display:none} }

/* ---- x link ---------------------------------------------------------------------------- */
.xlink{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;
  color:var(--dim);transition:color .18s,background .18s}
.xlink svg{width:17px;height:17px;display:block}
.xlink:hover{color:var(--ink);background:var(--panel)}

/* the header mark is a render now, so it gets a circular mask rather than sitting in its
   own square of near black */
.wordmark img{border-radius:50%}

/* ---- quote picker ---------------------------------------------------------------------- */
.qrow{background:rgba(18,20,23,.72);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:13px;padding:14px;
  margin-bottom:10px}
.qhead{display:block;font-size:13px;color:var(--dim);margin-bottom:10px}
.qopts{display:flex;gap:7px;flex-wrap:wrap}
.qchip{display:flex;align-items:center;gap:7px;padding:9px 15px;border-radius:999px;
  background:var(--panel);border:1px solid var(--line);cursor:pointer;font-size:14px;
  transition:border-color .16s,background .16s}
.qchip:hover{border-color:#34383f}
.qchip:has(input:checked){border-color:var(--gold);background:var(--panel-2)}
.qchip input{accent-color:var(--gold);width:14px;height:14px;margin:0}
.qchip b{font-weight:500}
.qcustom{width:100%;margin-top:10px;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;padding:11px 13px;color:var(--ink);font:inherit;font-size:14.5px;
  outline:none;transition:border-color .16s}
.qcustom:focus{border-color:var(--gold-deep)}
.qcustom.bad{border-color:#c2483a}
.qcustom::placeholder{color:#3f3f42}