/* ============================================================
   Agenture: left-rail application shell
   Wide, left-aligned, side-by-side. No pulsing indicators.
   ============================================================ */

:root{
  --bg:      #000000;
  --surface: #0b0b0d;
  --card:    #101013;
  --card-2:  #16161a;
  --edge:    rgba(255,255,255,.09);
  --edge-2:  rgba(255,255,255,.17);
  --ink:     #f5f5f6;
  --ink-2:   #a4a4ad;
  --ink-3:   #6d6d77;
  --ink-4:   #45454e;
  --pos:     #7ae7b0;
  --warn:    #e8c07d;
  --neg:     #e88b7d;

  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --rail: 248px;
  --gutter: clamp(18px, 2.2vw, 40px);
  --wrap: 1560px;
  --r-xl: 26px;
  --r-lg: 18px;
  --r-md: 12px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }

/* The UA rule for [hidden] is display:none, but any author display rule
   outranks it. Without this, setting `hidden` on a flex/grid element does
   nothing and it renders as an empty box. */
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden; }

body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-weight:400; font-size:16px; line-height:1.55;
  letter-spacing:normal; -webkit-font-smoothing:antialiased;
  padding-left:var(--rail);
  overflow-x:hidden;          /* off-canvas rail + pre-reveal transforms */
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-weight:600; letter-spacing:-.011em; line-height:1.08; margin:0; }
p{ margin:0; }
button{ font-family:inherit; }

.mono{ font-family:var(--mono); letter-spacing:normal; font-feature-settings:"tnum" 1; }
.muted{ color:var(--ink-3); }
.dim{ color:var(--ink-3); }
.pos{ color:var(--pos); }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }

.eyebrow{
  display:block; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-4); margin-bottom:16px;
}

/* ══════════ left rail ══════════ */
.rail{
  position:fixed; inset:0 auto 0 0; width:var(--rail); z-index:60;
  display:flex; flex-direction:column; gap:8px; padding:24px 16px;
  background:var(--surface); border-right:1px solid var(--edge);
  animation:railIn .7s var(--ease-out) both;
}
@keyframes railIn{ from{ transform:translateX(-14px); opacity:0; } to{ transform:none; opacity:1; } }

.rail__brand{ display:flex; align-items:center; gap:10px; padding:6px 10px 22px; }
.rail__brand img{ width:30px; height:30px; border-radius:50%; box-shadow:0 0 0 1px var(--edge-2); }
.rail__brand span{ font-size:16px; font-weight:600; letter-spacing:-.011em; }

.rail__nav{ display:flex; flex-direction:column; gap:2px; }
.rail__link{
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:var(--r-md);
  font-size:14px; color:var(--ink-3); position:relative;
  transition:color .22s var(--ease), background .22s var(--ease);
}
.rail__link svg{ flex:0 0 auto; opacity:.75; transition:opacity .22s, transform .3s var(--ease); }
.rail__link:hover{ color:var(--ink); background:rgba(255,255,255,.05); }
.rail__link:hover svg{ opacity:1; transform:translateX(1px); }
.rail__link.is-here{ color:var(--ink); background:rgba(255,255,255,.075); }
.rail__link.is-here svg{ opacity:1; }
.rail__link.is-here::before{
  content:""; position:absolute; left:-16px; top:50%; transform:translateY(-50%);
  width:2px; height:18px; background:var(--ink); border-radius:0 2px 2px 0;
}

.rail__foot{ margin-top:auto; display:flex; flex-direction:column; gap:10px; }
.rail__x{
  display:flex; align-items:center; gap:8px; padding:8px 12px; font-size:12.5px;
  color:var(--ink-4); transition:color .22s;
}
.rail__x:hover{ color:var(--ink-2); }

.netpill{
  display:flex; align-items:center; gap:8px; padding:7px 11px; border-radius:999px;
  border:1px solid var(--edge); font-size:11.5px; color:var(--ink-2);
}
.netpill i{ width:6px; height:6px; border-radius:50%; background:var(--pos); flex:0 0 auto; }
.netpill--off{ border-color:rgba(232,192,125,.35); color:var(--warn); }
.netpill--off i{ background:var(--warn); }
.netpill button{
  margin-left:auto; background:none; border:0; color:inherit; text-decoration:underline;
  cursor:pointer; font-size:11.5px; padding:0;
}

/* wallet button */
.wbtn{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px; width:100%;
  padding:11px 14px; border-radius:var(--r-md); border:1px solid var(--edge-2);
  background:var(--ink); color:#000; font-size:13.5px; font-weight:500; cursor:pointer;
  transition:transform .22s var(--ease), box-shadow .3s var(--ease), opacity .2s;
}
.wbtn:hover{ transform:translateY(-1px); box-shadow:0 10px 26px -12px rgba(255,255,255,.55); }
.wbtn:disabled{ opacity:.6; cursor:default; transform:none; box-shadow:none; }
.wbtn--on{ background:rgba(255,255,255,.06); color:var(--ink); border-color:var(--edge-2); }
.wbtn--on:hover{ background:rgba(255,255,255,.1); box-shadow:none; }
.wbtn__addr{ font-family:var(--mono); font-size:13px; }
.wbtn__meta{ font-size:11px; color:var(--ink-3); font-weight:400; }
.wbtn--compact{ width:auto; flex-direction:row; align-items:center; padding:8px 14px; }

/* ══════════ mobile top bar ══════════ */
.topbar{
  display:none; position:fixed; top:0; left:0; right:0; z-index:60;
  align-items:center; gap:14px; padding:12px var(--gutter);
  background:rgba(8,8,10,.9); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--edge);
}
.topbar__brand{ display:flex; align-items:center; gap:9px; font-size:15px; font-weight:500; }
.topbar__brand img{ border-radius:50%; }
.topbar__toggle{ background:none; border:0; padding:6px; cursor:pointer; }
.topbar__toggle span{ display:block; width:18px; height:1.4px; background:var(--ink); margin:4px 0; transition:.3s var(--ease); }
body.rail-open .topbar__toggle span:nth-child(1){ transform:translateY(5.4px) rotate(45deg); }
body.rail-open .topbar__toggle span:nth-child(2){ opacity:0; }
body.rail-open .topbar__toggle span:nth-child(3){ transform:translateY(-5.4px) rotate(-45deg); }
.topbar > div:last-child{ margin-left:auto; }

.scrim{
  position:fixed; inset:0; z-index:55; background:rgba(0,0,0,.6);
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
}
body.rail-open .scrim{ opacity:1; pointer-events:auto; }

/* ══════════ page scaffold ══════════ */
.page{ min-height:100vh; }
.section{ padding-block:clamp(40px,4vw,64px); }
.section--first{ padding-block-start:clamp(24px,2.4vw,36px); }
.section + .section{ border-top:1px solid var(--edge); }

.head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,460px); gap:clamp(20px,2.4vw,44px); align-items:end; margin-bottom:clamp(20px,2.2vw,32px); }
.head h1{ font-size:clamp(38px,4.6vw,62px); font-weight:600; }
.head h2{ font-size:clamp(28px,3.6vw,46px); font-weight:600; }
.head p{ color:var(--ink-2); font-size:clamp(14.5px,1.4vw,16.5px); }

.btn{
  --bh:46px;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:var(--bh); padding:0 22px; border-radius:999px; border:1px solid transparent;
  background:var(--ink); color:#000; font-size:14.5px; font-weight:500; cursor:pointer;
  transition:transform .24s var(--ease), box-shadow .3s var(--ease), background .24s, border-color .24s;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -16px rgba(255,255,255,.6); }
.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }
.btn--ghost{ background:rgba(255,255,255,.04); color:var(--ink); border-color:var(--edge-2); }
.btn--ghost:hover{ background:rgba(255,255,255,.09); box-shadow:none; }
.btn--sm{ --bh:38px; padding:0 17px; font-size:13.5px; }

/* ══════════ home ══════════ */
.hero{
  position:relative; display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  align-items:center; gap:clamp(20px,2.6vw,48px); overflow:hidden;
  padding-block:clamp(28px,3vw,52px);
}
.hero__copy{ position:relative; z-index:2; }
.hero h1{ font-size:clamp(42px,5.2vw,86px); font-weight:600; }
.hero h1 .line{ display:block; overflow:hidden; }
.hero h1 .line > span{
  display:block; transform:translateY(105%);
  animation:lineUp 1.05s var(--ease-out) forwards;
}
.hero h1 .line:nth-child(1) > span{ animation-delay:.1s; }
.hero h1 .line:nth-child(2) > span{ animation-delay:.22s; }
@keyframes lineUp{ to{ transform:none; } }

.hero__sub{
  margin-top:18px; max-width:520px; font-size:clamp(15.5px,1.5vw,18.5px); color:var(--ink-2);
  animation:fadeUp .9s var(--ease-out) .5s both;
}
.hero__acts{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; animation:fadeUp .9s var(--ease-out) .62s both; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

.hero__visual{ position:relative; height:clamp(340px,40vw,580px); animation:scaleIn 1.4s var(--ease-out) .1s both; }
.hero__visual canvas{ position:absolute; inset:0; width:100%; height:100%; }
@keyframes scaleIn{ from{ opacity:0; transform:scale(.92); } to{ opacity:1; transform:none; } }

/* horizontal flow strip, side by side, never stacked */
.flow{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.flow__cell{
  position:relative; border:1px solid var(--edge); border-radius:var(--r-xl);
  padding:18px 18px 20px; background:var(--card); min-height:132px;
  /* rows, not space-between: the title sits on the same line in every card
     no matter how many lines its description wraps to */
  display:grid; grid-template-rows:auto auto 1fr; gap:0;
  transition:border-color .35s var(--ease), transform .45s var(--ease), background .35s;
}
.flow__cell:hover{ border-color:var(--edge-2); background:var(--card-2); transform:translateY(-4px); }
.flow__i{ font-family:var(--mono); font-size:11px; color:var(--ink-4); }
.flow__t{ font-size:clamp(17px,1.5vw,21px); letter-spacing:-.011em; margin-top:22px; }
.flow__d{ font-size:12.5px; color:var(--ink-3); margin-top:6px; }
.flow__cell::after{
  content:"→"; position:absolute; right:-18px; top:50%; transform:translateY(-50%);
  color:var(--ink-4); font-size:14px; z-index:2;
}
.flow__cell:last-child::after{ display:none; }

/* statement rows */
.claims{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.claim{
  position:relative; overflow:hidden;
  border:1px solid var(--edge); border-radius:var(--r-xl); padding:clamp(20px,2vw,28px);
  background:var(--card); transition:border-color .35s, transform .45s var(--ease), background .35s;
}
.claim::after{
  content:""; position:absolute; inset:0; opacity:0; pointer-events:none;
  background:radial-gradient(460px 220px at var(--mx,50%) var(--my,0%), rgba(255,255,255,.07), transparent 70%);
  transition:opacity .45s;
}
.claim:hover{ border-color:var(--edge-2); background:var(--card-2); transform:translateY(-4px); }
.claim:hover::after{ opacity:1; }
.claim h3{ font-size:clamp(18px,1.7vw,22px); }
.claim p{ margin-top:10px; color:var(--ink-3); font-size:13.5px; }

.bigline{
  font-size:clamp(26px,3.6vw,54px); font-weight:600; letter-spacing:-.014em; line-height:1.1;
  max-width:1200px;
}
.bigline .dim{ color:var(--ink-4); }

/* ══════════ market ══════════ */
.toolbar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:22px; }
.toolbar__spacer{ margin-left:auto; }
.chip{
  font-size:13px; color:var(--ink-2); cursor:pointer; background:rgba(255,255,255,.03);
  border:1px solid var(--edge); border-radius:999px; padding:7px 15px;
  transition:color .22s, border-color .22s, background .22s, transform .22s var(--ease);
}
.chip:hover{ color:var(--ink); border-color:var(--edge-2); transform:translateY(-1px); }
.chip.is-on{ background:var(--ink); color:#000; border-color:var(--ink); }

.table{ border:1px solid var(--edge); border-radius:var(--r-xl); overflow:hidden; background:var(--card); }
.table__head, .table__row{
  display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr) auto;
  gap:18px; align-items:center; padding:15px 24px;
}
.table__head{
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-4);
  border-bottom:1px solid var(--edge); background:rgba(255,255,255,.02);
}
.table__row{ border-bottom:1px solid var(--edge); transition:background .25s; }
.table__row:last-child{ border-bottom:0; }
.table__row:hover{ background:rgba(255,255,255,.03); }

.empty{
  border:1px dashed var(--edge-2); border-radius:var(--r-xl); padding:clamp(24px,2.6vw,40px);
  background:var(--card); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,420px);
  gap:clamp(24px,4vw,56px); align-items:center;
}
.empty h3{ font-size:clamp(22px,2.4vw,30px); }
.empty p{ margin-top:14px; color:var(--ink-3); font-size:14.5px; max-width:560px; }
.empty__side{ border-left:1px solid var(--edge); padding-left:clamp(24px,3vw,40px); }
.empty__side dl{ margin:0; display:grid; gap:14px; }
.empty__side div{ display:grid; gap:4px; }
.empty__side dt{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-4); }
.empty__side dd{ margin:0; font-family:var(--mono); font-size:13px; color:var(--ink-2); word-break:break-all; }

.notice{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:18px; align-items:start;
  border:1px solid var(--edge); border-left:2px solid var(--edge-2); border-radius:var(--r-lg);
  padding:20px 24px; background:rgba(255,255,255,.025);
}
.notice__k{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-4); padding-top:2px; }
.notice p{ color:var(--ink-3); font-size:14px; max-width:820px; }
.notice code{ font-family:var(--mono); font-size:12.5px; color:var(--ink); background:rgba(255,255,255,.07); padding:2px 6px; border-radius:5px; }

/* ══════════ protocol ══════════ */
.duo{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.panel{
  border:1px solid var(--edge); border-radius:var(--r-xl); padding:clamp(20px,2.2vw,30px);
  background:var(--card);
}
.panel--on{
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.012));
  border-color:var(--edge-2);
}
.panel h3{ font-size:clamp(22px,2.4vw,30px); margin-bottom:16px; }
.panel p{ color:var(--ink-3); font-size:14.5px; }
.panel--on p{ color:var(--ink-2); }

.steps{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.stepcard{
  border:1px solid var(--edge); border-radius:var(--r-xl); padding:20px; background:var(--card);
  transition:border-color .35s, transform .45s var(--ease), background .35s;
}
.stepcard:hover{ border-color:var(--edge-2); background:var(--card-2); transform:translateY(-4px); }
.stepcard__i{
  display:grid; place-items:center; width:30px; height:30px; border-radius:50%;
  border:1px solid var(--edge-2); font-family:var(--mono); font-size:12px; margin-bottom:14px;
}
.stepcard h3{ font-size:18px; }
.stepcard p{ margin-top:10px; color:var(--ink-3); font-size:14px; }

.pairs{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.pair{ border:1px solid var(--edge); border-radius:var(--r-xl); padding:18px; background:var(--card); }
.pair__row{ display:flex; align-items:center; gap:12px; }
.pair__node{ flex:1; border:1px solid var(--edge); border-radius:var(--r-md); padding:11px 13px; background:#000; min-width:0; }
.pair__node--a{ border-color:var(--edge-2); background:rgba(255,255,255,.05); }
.pair__k{ display:block; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-4); }
.pair__v{ display:block; font-family:var(--mono); font-size:12.5px; margin-top:4px; overflow:hidden; text-overflow:ellipsis; }
.pair__arrow{ color:var(--ink-4); font-size:13px; flex:0 0 auto; }
.pair > p{ margin-top:14px; color:var(--ink-3); font-size:13.5px; }

.code{
  margin:0; padding:24px; border:1px solid var(--edge); border-radius:var(--r-lg);
  background:#050506; font-family:var(--mono); font-size:12.6px; line-height:1.85;
  color:var(--ink-2); overflow-x:auto;
}
.code .c1{ color:var(--ink-4); }
.code .c2{ color:#fff; }
.code .c3{ color:var(--pos); }

.faq{ border-top:1px solid var(--edge); }
.qa{ border-bottom:1px solid var(--edge); }
.qa summary{
  list-style:none; cursor:pointer; padding:16px 44px 16px 0; position:relative;
  font-size:clamp(16.5px,1.7vw,20px); letter-spacing:-.01em; transition:color .22s;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary:hover{ color:var(--ink-2); }
.qa__x{ position:absolute; right:4px; top:50%; width:12px; height:12px; margin-top:-6px; }
.qa__x::before, .qa__x::after{
  content:""; position:absolute; left:0; top:5.5px; width:12px; height:1.3px;
  background:var(--ink-3); transition:transform .3s var(--ease);
}
.qa__x::after{ transform:rotate(90deg); }
.qa[open] .qa__x::after{ transform:rotate(0deg); }
.qa__a{ padding:0 60px 18px 0; }
.qa__a p{ color:var(--ink-3); font-size:14.5px; max-width:860px; }

/* ══════════ forms ══════════ */
.form{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.field{ display:grid; gap:8px; }
.field--wide{ grid-column:1 / -1; }
.field label{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-4); }
.field input, .field select, .field textarea{
  width:100%; padding:13px 15px; border-radius:var(--r-md); border:1px solid var(--edge);
  background:var(--card); color:var(--ink); font-family:inherit; font-size:14.5px;
  transition:border-color .22s, background .22s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--edge-2); background:var(--card-2);
}
.field input::placeholder, .field textarea::placeholder{ color:var(--ink-4); }
.field small{ font-size:12px; color:var(--ink-4); }

.gate{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:center;
  border:1px solid var(--edge); border-radius:var(--r-xl); padding:26px 30px; background:var(--card);
}
.gate h3{ font-size:20px; }
.gate p{ margin-top:8px; color:var(--ink-3); font-size:14px; }

.kv{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--edge);
     border:1px solid var(--edge); border-radius:var(--r-xl); overflow:hidden; }
.kv > div{ background:var(--card); padding:24px; }
.kv dt{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-4); }
.kv dd{ margin:10px 0 0; font-family:var(--mono); font-size:clamp(18px,2vw,24px); letter-spacing:-.012em; word-break:break-all; }

/* ══════════ footer ══════════ */
.foot{ border-top:1px solid var(--edge); padding:26px 0 34px; }
.foot__in{ display:flex; align-items:flex-start; gap:24px; flex-wrap:wrap; }
.foot__legal{ font-size:11.5px; color:var(--ink-4); max-width:880px; line-height:1.6; }
.foot__links{ margin-left:auto; display:flex; gap:20px; }
.foot__links a{ font-size:13px; color:var(--ink-3); transition:color .22s; }
.foot__links a:hover{ color:var(--ink); }

/* ══════════ toasts ══════════ */
.toasts{ position:fixed; right:22px; bottom:22px; z-index:90; display:grid; gap:10px; justify-items:end; }
.toast{
  padding:13px 18px; border-radius:var(--r-md); border:1px solid var(--edge-2);
  background:#111114; color:var(--ink); font-size:13.5px; max-width:360px;
  opacity:0; transform:translateY(10px) scale(.97);
  transition:opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.toast.in{ opacity:1; transform:none; }
.toast--warn{ border-color:rgba(232,192,125,.4); }

/* ══════════ wallet menu ══════════ */
.wmenu{
  position:fixed; inset:0; z-index:95; background:rgba(0,0,0,.62);
  display:grid; place-items:center; padding:24px;
  opacity:0; transition:opacity .26s var(--ease);
}
.wmenu.in{ opacity:1; }
.wmenu__card{
  width:min(420px,100%); border:1px solid var(--edge-2); border-radius:var(--r-xl);
  background:#0e0e11; padding:24px;
  transform:scale(.95) translateY(8px); transition:transform .3s var(--ease-out);
}
.wmenu.in .wmenu__card{ transform:none; }
.wmenu__card header{ display:flex; align-items:center; justify-content:space-between; }
.wmenu__k{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-4); }
.wmenu__close{ background:none; border:0; color:var(--ink-3); font-size:20px; cursor:pointer; line-height:1; }
.wmenu__addr{ font-family:var(--mono); font-size:13px; margin-top:16px; word-break:break-all; color:var(--ink-2); }
.wmenu__rows{ margin:20px 0 0; display:grid; gap:1px; background:var(--edge); border:1px solid var(--edge); border-radius:var(--r-md); overflow:hidden; }
.wmenu__rows div{ display:flex; justify-content:space-between; padding:12px 14px; background:#0e0e11; font-size:13px; }
.wmenu__rows dt{ color:var(--ink-4); }
.wmenu__rows dd{ margin:0; font-family:var(--mono); }
.wmenu__acts{ display:grid; gap:8px; margin-top:20px; }
.wmenu__acts button, .wmenu__acts a{
  padding:11px 14px; border-radius:var(--r-md); border:1px solid var(--edge);
  background:rgba(255,255,255,.03); color:var(--ink); font-size:13.5px; cursor:pointer;
  text-align:center; transition:background .22s, border-color .22s;
}
.wmenu__acts button:hover, .wmenu__acts a:hover{ background:rgba(255,255,255,.08); border-color:var(--edge-2); }

/* ══════════ animation system ══════════ */
[data-anim]{
  opacity:0;
  transition:opacity .85s var(--ease-out) var(--delay,0ms),
             transform .95s var(--ease-out) var(--delay,0ms),
             filter .85s var(--ease-out) var(--delay,0ms),
             clip-path 1s var(--ease-out) var(--delay,0ms);
  will-change:opacity, transform;
}
[data-anim].in{ opacity:1; transform:none; filter:none; clip-path:inset(0 0 0 0); }

[data-anim="rise"]    { transform:translateY(26px); }
[data-anim="fall"]    { transform:translateY(-22px); }
[data-anim="scale"]   { transform:scale(.93); }
[data-anim="pop"]     { transform:scale(.88) translateY(18px); }
[data-anim="slide-l"] { transform:translateX(-36px); }
[data-anim="slide-r"] { transform:translateX(36px); }
[data-anim="blur"]    { filter:blur(14px); transform:scale(1.02); }
[data-anim="clip"]    { clip-path:inset(0 0 90% 0); transform:translateY(12px); }
[data-anim="tilt"]    { transform:perspective(900px) rotateX(9deg) translateY(24px); transform-origin:top center; }

/* ══════════ responsive ══════════ */
@media (max-width:1200px){
  .flow, .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .flow__cell:nth-child(2)::after{ display:none; }
  .claims, .pairs{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero{ grid-template-columns:1fr; }
  .hero__visual{ height:min(46vh,420px); order:-1; }
}
@media (max-width:960px){
  :root{ --rail:0px; }
  body{ padding-left:0; padding-top:60px; }
  .topbar{ display:flex; }
  .rail{
    transform:translateX(-100%); width:270px; animation:none;
    transition:transform .36s var(--ease); box-shadow:0 0 60px rgba(0,0,0,.7);
  }
  body.rail-open .rail{ transform:none; }
  .rail__link.is-here::before{ left:-16px; }
  .head, .empty{ grid-template-columns:1fr; }
  .empty__side{ border-left:0; border-top:1px solid var(--edge); padding-left:0; padding-top:24px; }
  .duo, .form, .kv{ grid-template-columns:1fr; }
  .gate{ grid-template-columns:1fr; }
  .table__head{ display:none; }
  .table__row{ grid-template-columns:1fr 1fr; row-gap:10px; }
}
@media (max-width:620px){
  .flow, .steps, .claims, .pairs{ grid-template-columns:1fr; }
  .flow__cell::after{ display:none; }
  .kv{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  [data-anim]{ opacity:1; transform:none; filter:none; clip-path:none; }
  .hero h1 .line > span{ transform:none; }
}

/* ══════════ live chain strip ══════════ */
.live{
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1px;
  margin-top:26px; background:var(--edge); border:1px solid var(--edge);
  border-radius:var(--r-lg); overflow:hidden;
}
.live__cell{ background:var(--surface); padding:11px 13px; min-width:0; }
.live__k{ display:block; font-size:9px; letter-spacing:.17em; text-transform:uppercase; color:var(--ink-4); }
.live__v{ display:block; margin-top:5px; font-size:13.5px; color:var(--ink); letter-spacing:-.006em;
          white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
a.live__v:hover{ text-decoration:underline; }
.live__v--sm{ font-size:11px; color:var(--ink-3); }

/* ══════════ dense composite blocks ══════════ */
.slab{ display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.35fr); gap:clamp(18px,2.4vw,40px); align-items:center; }
.slab__lead .bigline{ margin-top:2px; }

.mesh{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.mesh__wide{ grid-column:1 / -1; }

.split2{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:clamp(20px,2.6vw,48px); align-items:center; }
.split2 h3{ font-size:clamp(19px,1.9vw,25px); margin-top:2px; }
.split2 p{ margin-top:10px; color:var(--ink-3); font-size:13.5px; max-width:520px; }

.ticks{ list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--edge);
        border:1px solid var(--edge); border-radius:var(--r-md); overflow:hidden; }
.ticks li{ background:var(--card); padding:10px 14px; font-size:13px; color:var(--ink-2); position:relative; padding-left:30px; }
.ticks li::before{ content:""; position:absolute; left:14px; top:16px; width:6px; height:6px;
                   border-radius:50%; background:var(--ink-3); }

.cta2{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(20px,3vw,48px); align-items:center;
       border:1px solid var(--edge); border-radius:var(--r-xl); padding:clamp(22px,2.4vw,34px); background:var(--card); }
.cta2 h2{ font-size:clamp(22px,2.6vw,36px); font-weight:600; }
.cta2 .hero__acts{ margin-top:0; }

@media (max-width:1200px){
  .slab, .split2, .cta2{ grid-template-columns:1fr; }
  .live{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .mesh{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:620px){
  .live{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mesh{ grid-template-columns:1fr; }
}

.wmenu__note{ margin-top:14px; font-size:13px; color:var(--ink-3); line-height:1.5; }
.wmenu .field label{ margin-bottom:2px; }

.livetag{ font-size:11.5px; color:var(--ink-4); }
.table__head, .table__row{ grid-template-columns:minmax(0,1.6fr) minmax(0,.9fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) auto; }
.table__sub{ display:block; font-size:11px; color:var(--ink-4); margin-top:2px; }
.table__op{ font-size:12.5px; color:var(--ink-3); }
.table__op:hover{ color:var(--ink); text-decoration:underline; }

.table__row--pos{ grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) auto; }
.chip:disabled{ opacity:.35; cursor:not-allowed; }
.chip:disabled:hover{ transform:none; color:var(--ink-2); border-color:var(--edge); }

/* ══════════ operator panel ══════════ */
.opbox{ border:1px solid var(--edge-2); border-radius:var(--r-xl); background:var(--card-2); overflow:hidden; }
.opbox__head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:20px;
              padding:20px 24px; border-bottom:1px solid var(--edge); align-items:center; }
.opbox__head h3{ font-size:19px; margin-top:2px; }
.opbox__stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:0; }
.opbox__stats dt{ font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-4); }
.opbox__stats dd{ margin:6px 0 0; font-size:15px; }
.opbox__acts{ display:flex; flex-wrap:wrap; gap:8px; padding:16px 24px; }
@media (max-width:960px){ .opbox__head{ grid-template-columns:1fr; } }

/* Placeholders held while a remembered wallet session is restored. They
   reserve the exact footprint of the real control so nothing jumps, and
   they carry no text so the UI never claims to be disconnected. */
.wbtn--restoring{
  display:block; background:rgba(255,255,255,.05); border-color:var(--edge);
  height:41px; cursor:default; pointer-events:none;
}
.wbtn--restoring.wbtn--compact{ height:34px; width:104px; }
.gate--restoring{ min-height:86px; }

/* work dialog and multi-step progress */
.wmenu__card--wide{ width:min(680px,100%); }
.field textarea{
  width:100%; padding:13px 15px; border-radius:var(--r-md); border:1px solid var(--edge);
  background:var(--card); color:var(--ink); font-family:var(--mono); font-size:12.5px;
  line-height:1.6; resize:vertical; transition:border-color .22s, background .22s;
}
.field textarea:focus{ outline:none; border-color:var(--edge-2); background:var(--card-2); }
.steps-log{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:1px;
            background:var(--edge); border:1px solid var(--edge); border-radius:var(--r-md); overflow:hidden; }
.steps-log li{ background:var(--card); padding:11px 14px; font-size:13px; color:var(--ink-3);
               font-family:var(--mono); word-break:break-all; }
.steps-log li.is-done{ color:var(--ink); }
.steps-log li.is-fail{ color:var(--neg); }
.table__acts{ display:flex; gap:6px; justify-content:flex-end; }
.table__row--order{ grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) auto; }
.badge-st{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.badge-st--open{ color:var(--warn); }
.badge-st--delivered{ color:var(--ink); }
.badge-st--settled{ color:var(--pos); }
.badge-st--refunded{ color:var(--ink-4); }

/* build tag beside the wordmark */
.build{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.02em; line-height:1;
  color:var(--ink-3); border:1px solid var(--edge); border-radius:5px;
  padding:3px 5px; margin-left:1px; align-self:center; white-space:nowrap;
  transition:color .22s, border-color .22s;
}
.rail__brand:hover .build, .topbar__brand:hover .build{ color:var(--ink-2); border-color:var(--edge-2); }

/* activity feed */
.table__row--event{ grid-template-columns:minmax(0,110px) minmax(0,1fr) minmax(0,110px) auto; }
.badge-ev{
  font-size:10px; letter-spacing:.11em; text-transform:uppercase;
  border:1px solid var(--edge); border-radius:999px; padding:4px 9px;
  color:var(--ink-3); justify-self:start; white-space:nowrap;
}
.badge-ev--orders{ color:var(--ink); border-color:var(--edge-2); }
.badge-ev--money{ color:var(--pos); border-color:rgba(122,231,176,.3); }
.badge-ev--listings{ color:var(--ink-3); }
@media (max-width:960px){
  .table__row--event{ grid-template-columns:1fr auto; row-gap:8px; }
}

/* ══════════ scrollbars ══════════
   Thin, dark, and part of the page rather than a grey system bar.
   Firefox gets the two-property form; WebKit gets the pseudo-elements. */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.16) transparent;
}

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-corner{ background:transparent; }

::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.14);
  border-radius:99px;
  /* inset by a transparent border so the thumb reads as a slim pill
     rather than filling the gutter edge to edge */
  border:3px solid transparent;
  background-clip:padding-box;
  transition:background .2s;
}
::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.26); background-clip:padding-box; }
::-webkit-scrollbar-thumb:active{ background:rgba(255,255,255,.34); background-clip:padding-box; }

/* tighter bars inside panels that scroll on their own */
.code::-webkit-scrollbar,
.compare::-webkit-scrollbar,
.term__body::-webkit-scrollbar,
.field textarea::-webkit-scrollbar{ width:8px; height:8px; }
.code::-webkit-scrollbar-thumb,
.compare::-webkit-scrollbar-thumb,
.term__body::-webkit-scrollbar-thumb,
.field textarea::-webkit-scrollbar-thumb{ border-width:2px; }

/* the rail never needs a visible bar */
.rail{ scrollbar-width:none; }
.rail::-webkit-scrollbar{ width:0; height:0; }