@font-face{
  font-family:local-ui;
  src:local("Arial")
}
*{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth;
  scroll-padding-top:90px
}
body{
  margin:0;
  background:#f1f1e9;
  color:#111319;
  font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased
}
a{
  color:inherit;
  text-decoration:none
}
button{
  font:inherit;
  cursor:pointer
}
button,a{
  -webkit-tap-highlight-color:transparent
}
button:focus-visible,a:focus-visible{
  outline:3px solid #4972ff;
  outline-offset:5px
}
button{
  border:0
}
::selection{
  background:#184cff;
  color:white
}
:root{
  --blue:#234cff;
  --ink:#111319;
  --paper:#f1f1e9;
  --line:rgba(17,19,25,.18);
  --pad:4.7vw
}
header{
  position:fixed;
  z-index:60;
  top:0;
  width:100%;
  height:86px;
  padding:0 var(--pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:rgba(241,241,233,.88);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
  transition:background .4s
}
.logo{
  font-size:32px;
  font-weight:850;
  letter-spacing:-2px;
  line-height:1;
  white-space:nowrap
}
.logo i{
  font-style:normal;
  color:var(--blue)
}
.nav{
  display:flex;
  gap:32px;
  font-size:13px
}
.nav a{
  position:relative;
  padding:10px 0
}
.nav a:after{
  content:"";
  position:absolute;
  bottom:3px;
  left:0;
  height:1px;
  width:0;
  background:currentColor;
  transition:width .3s
}
.nav a:hover:after{
  width:100%
}
.nav-right{
  display:flex;
  align-items:center;
  gap:25px
}
.mono,.eyebrow{
  font:11px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.1em
}
.muted{
  color:#727575
}
.arrow-btn{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:48px;
  background:var(--ink);
  color:white;
  font-size:13px;
  padding:17px 21px;
  transition:background .25s,transform .25s
}
.arrow-btn:hover{
  background:var(--blue);
  transform:translateY(-2px)
}
.arrow-btn.blue{
  background:var(--blue)
}
.arrow-btn.blue:hover{
  background:#163bd2
}
.arrow{
  display:inline-block;
  font-size:20px;
  line-height:1;
  transition:transform .3s
}
.arrow-btn:hover .arrow{
  transform:translateX(4px)
}
.menu-btn{
  display:none;
  background:none;
  font-size:20px
}
.progress{
  height:2px;
  background:var(--blue);
  position:fixed;
  z-index:70;
  left:0;
  top:84px;
  transform-origin:0;
  width:100%;
  transform:scaleX(0)
}
.hero{
  height:max(840px,100svh);
  min-height:760px;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line);
  isolation:isolate
}
.hero:before{
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(90deg,transparent calc(25% - 1px),rgba(17,19,25,.065) 25%,transparent calc(25% + 1px)),linear-gradient(90deg,transparent calc(75% - 1px),rgba(17,19,25,.065) 75%,transparent calc(75% + 1px));
  pointer-events:none
}
.hero-copy{
  position:relative;
  z-index:3;
  padding:155px var(--pad) 0;
  pointer-events:none;
  width:65%
}
.hero-copy>*{
  pointer-events:auto
}
.eyebrow{
  display:flex;
  align-items:center;
  gap:12px
}
.eyebrow:before{
  content:"";
  width:6px;
  height:6px;
  background:var(--blue);
  display:inline-block
}
.hero h1{
  font-size:clamp(68px,7.8vw,125px);
  letter-spacing:-.075em;
  line-height:1.14;
  font-weight:580;
  margin:34px 0 27px;
  white-space:nowrap
}
.hero h1 span{
  color:var(--blue)
}
.hero-description{
  font-size:15px;
  line-height:1.9;
  max-width:355px;
  margin-bottom:27px;
  color:#52565c;
  letter-spacing:.04em
}
.hero-action{
  display:flex;
  gap:25px;
  align-items:center
}
.text-link{
  font-size:12px;
  border-bottom:1px solid #969a9c;
  padding:8px 0;
  display:inline-flex;
  gap:18px
}
.hero-art{
  position:absolute;
  right:-7%;
  top:14%;
  width:65%;
  height:80%;
  z-index:1;
  pointer-events:none
}
#field{
  width:100%;
  height:100%
}
.art-label{
  position:absolute;
  font-size:11px;
  letter-spacing:.12em
}
.art-label.top{
  right:15%;
  top:6%;
  writing-mode:vertical-rl
}
.art-label.bottom{
  bottom:2%;
  left:26%;
  display:flex;
  align-items:center;
  gap:9px
}
.art-label.bottom:before{
  content:"";
  height:5px;
  width:5px;
  background:#244cff;
  border-radius:50%;
  box-shadow:0 0 10px #234cff
}
.hero-bottom{
  position:absolute;
  bottom:0;
  left:var(--pad);
  right:var(--pad);
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:end;
  padding:24px 0 28px;
  border-top:1px solid var(--line);
  font-size:11px;
  z-index:4
}
.hero-bottom .right{
  text-align:right;
  line-height:1.8
}
.scroll-hint{
  display:flex;
  gap:20px;
  align-items:center
}
.scroll-hint span:first-child{
  display:block;
  width:20px;
  height:32px;
  border:1px solid #85888a;
  border-radius:20px;
  position:relative
}
.scroll-hint span:first-child:after{
  content:"";
  position:absolute;
  width:2px;
  height:6px;
  background:var(--ink);
  top:7px;
  left:8px;
  animation:scrollhint 1.8s infinite
}
@keyframes scrollhint{
  to{
    transform:translateY(9px);
    opacity:0
  }
}
.ticker{
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  padding:25px var(--pad);
  gap:5vw;
  overflow:hidden
}
.ticker-title{
  font-size:11px;
  color:#747875;
  flex-shrink:0;
  line-height:1.7
}
.ticker-track{
  display:flex;
  justify-content:space-between;
  gap:4vw;
  width:100%;
  white-space:nowrap
}
.asset-name{
  font-size:17px;
  letter-spacing:-.04em;
  display:flex;
  align-items:center;
  gap:9px;
  font-weight:600
}
.asset-name small{
  font:10px monospace;
  font-weight:normal;
  color:#7d807e
}
.asset-mark{
  height:24px;
  min-width:24px;
  display:grid;
  place-items:center;
  font-size:18px
}
.section-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:11px;
  letter-spacing:.06em
}
.section-top span:last-child{
  font-family:monospace
}
.intro{
  padding:110px var(--pad) 100px
}
.intro h2{
  font-size:clamp(34px,4.5vw,70px);
  font-weight:500;
  letter-spacing:-.055em;
  line-height:1.35;
  margin:35px 0
}
.intro h2 .soft{
  color:#92988e
}
.intro-bottom{
  display:flex;
  justify-content:space-between;
  align-items:end
}
.intro-bottom p{
  font-size:14px;
  line-height:1.9;
  margin:0;
  max-width:430px;
  color:#646861
}
.outline-chip{
  font-size:10px;
  letter-spacing:.12em;
  border:1px solid var(--line);
  padding:9px 12px
}
.story{
  height:340vh;
  background:var(--blue);
  color:#fff;
  position:relative;
  --sp:0
}
.story-sticky{
  position:sticky;
  top:0;
  height:100svh;
  min-height:720px;
  overflow:hidden;
  padding:115px var(--pad) 35px;
  display:flex;
  flex-direction:column
}
.blue-grid{
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:80px 80px;
  mask-image:linear-gradient(to bottom,transparent,#000 35%,#000)
}
.story-sticky:after{
  content:"";
  position:absolute;
  width:1000px;
  height:1000px;
  right:-160px;
  top:80px;
  border-radius:50%;
  border:1px solid #ffffff20;
  box-shadow:0 0 0 90px #ffffff04,0 0 0 180px #ffffff04,0 0 0 270px #ffffff04;
  pointer-events:none;
  transform:scale(calc(.85 + var(--sp)*.2))
}
.story .section-top{
  z-index:2
}
.story-main{
  display:grid;
  grid-template-columns:1fr 1fr;
  flex:1;
  align-items:center;
  gap:6vw;
  position:relative;
  z-index:3
}
.story-copy{
  position:relative;
  min-height:350px
}
.chapter{
  position:absolute;
  top:0;
  left:0;
  opacity:0;
  transform:translateY(35px);
  transition:opacity .5s,transform .6s;
  pointer-events:none
}
.chapter.active{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto
}
.chapter .chapter-num{
  font:12px monospace;
  opacity:.55;
  display:block;
  margin-bottom:30px
}
.chapter h2{
  font-size:clamp(40px,4.2vw,66px);
  font-weight:500;
  letter-spacing:-.055em;
  line-height:1.24;
  margin:0 0 28px
}
.chapter p{
  font-size:14px;
  line-height:1.9;
  max-width:325px;
  opacity:.7
}
.chapter .caption{
  margin-top:32px;
  font:10px monospace;
  letter-spacing:.08em;
  opacity:.6
}
.product-stage{
  position:relative;
  padding:30px 0
}
.terminal{
  position:relative;
  max-width:440px;
  margin:auto;
  background:#f8f9fc;
  color:#151821;
  box-shadow:0 35px 80px #09258d55;
  border-radius:3px;
  transform:perspective(1300px) rotateY(-8deg) rotateX(4deg);
  transition:transform .9s ease;
  overflow:hidden
}
.story[data-step="1"] .terminal{
  transform:perspective(1300px) rotateY(0) rotateX(0)
}
.story[data-step="2"] .terminal{
  transform:perspective(1300px) rotateY(5deg) rotateX(-2deg)
}
.terminal-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid #15182112;
  padding:23px 25px
}
.terminal-head .logo{
  font-size:25px
}
.demo-pill{
  font:9px monospace;
  letter-spacing:.1em;
  padding:5px 7px;
  background:#e7eafa;
  color:#747b9a
}
.terminal-content{
  height:385px;
  position:relative
}
.screen{
  position:absolute;
  inset:0;
  padding:28px;
  opacity:0;
  transform:translateY(12px);
  transition:opacity .5s,transform .6s;
  pointer-events:none
}
.screen.active{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto
}
.screen-label{
  color:#7d828d;
  font-size:10px;
  letter-spacing:.05em
}
.screen-amount{
  font-size:36px;
  letter-spacing:-1.4px;
  margin:12px 0 23px
}
.screen-amount small{
  font-size:13px;
  letter-spacing:0;
  color:#9299a6;
  margin-left:8px
}
.asset-options{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px
}
.asset-option{
  background:white;
  border:1px solid #e4e7ed;
  padding:13px;
  display:flex;
  align-items:center;
  gap:9px;
  font-size:12px;
  text-align:left;
  color:#434b5b;
  transition:.25s
}
.asset-option b{
  width:24px;
  height:24px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#edf0f5;
  font-size:13px
}
.asset-option.active{
  border-color:var(--blue);
  background:#eff2ff;
  color:var(--blue)
}
.asset-option.active b{
  background:var(--blue);
  color:white
}
.mini-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:24px;
  padding-top:17px;
  border-top:1px solid #e0e3ea;
  font-size:10px;
  color:#969ba4
}
.asset-network{
  color:#234cff;
  font-weight:600
}
.confirm-visual{
  height:180px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative
}
.confirm-orbit{
  height:130px;
  width:130px;
  border:1px solid #ced8ff;
  border-radius:50%;
  position:absolute;
  animation:rotate 10s linear infinite
}
.confirm-orbit:before{
  content:"";
  height:9px;
  width:9px;
  background:var(--blue);
  border-radius:50%;
  position:absolute;
  top:-4px;
  left:60px
}
.confirm-orbit.o2{
  width:95px;
  height:95px;
  animation-direction:reverse
}
.confirm-core{
  width:62px;
  height:62px;
  border-radius:50%;
  background:var(--blue);
  color:white;
  display:grid;
  place-items:center;
  font-size:25px;
  box-shadow:0 0 0 12px #edf0ff
}
.confirm-text{
  text-align:center;
  font-size:13px
}
.confirm-text p{
  font:10px/1.8 monospace;
  color:#8c94a8
}
.status-line{
  display:flex;
  align-items:center;
  gap:7px;
  justify-content:center;
  margin-top:18px;
  font-size:10px;
  color:#4665cc
}
.status-dot{
  width:5px;
  height:5px;
  background:#234cff;
  border-radius:50%;
  animation:pulse 1.8s infinite
}
@keyframes pulse{
  50%{
    opacity:.25
  }
}
@keyframes rotate{
  to{
    transform:rotate(360deg)
  }
}
.ledger-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:10px;
  color:#89929c
}
.confirmed{
  color:#16826c;
  font-size:10px;
  display:flex;
  align-items:center;
  gap:5px
}
.confirmed:before{
  content:"";
  height:5px;
  width:5px;
  border-radius:50%;
  background:#16826c
}
.ledger-number{
  font-size:43px;
  letter-spacing:-1.8px;
  margin:18px 0 5px
}
.ledger-currency{
  font:12px monospace;
  color:#788499
}
.ledger-rows{
  margin-top:25px;
  border-top:1px solid #dee4ec
}
.ledger-row{
  display:flex;
  justify-content:space-between;
  font-size:11px;
  padding:11px 0;
  border-bottom:1px solid #e8ebef
}
.ledger-row span{
  color:#8b929a
}
.ledger-row.total{
  color:var(--blue);
  font-weight:600
}
.terminal-foot{
  background:#edf0f4;
  padding:13px 25px;
  display:flex;
  justify-content:space-between;
  font:9px monospace;
  color:#858fa0
}
.floating-tag{
  position:absolute;
  border:1px solid #ffffff40;
  padding:12px 16px;
  font:10px monospace;
  letter-spacing:.06em;
  backdrop-filter:blur(8px);
  background:#234cff66;
  transition:transform .6s,opacity .6s;
  z-index:4
}
.floating-tag.t1{
  top:0;
  right:-15px
}
.floating-tag.t2{
  bottom:5px;
  left:-25px;
  transform:translateY(calc(var(--sp)*-20px))
}
.story-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:relative;
  z-index:4;
  gap:35px
}
.story-steps{
  display:flex;
  gap:35px;
  flex:1
}
.step-link{
  background:none;
  color:#ffffff65;
  font-size:11px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:18px 0;
  border-top:1px solid #ffffff35;
  flex:1;
  transition:color .3s
}
.step-link span{
  font:10px monospace
}
.step-link.active{
  color:white;
  border-color:white
}
.story-bottom .mono{
  opacity:.55;
  white-space:nowrap
}
.story-progress{
  height:2px;
  background:white;
  transform:scaleX(var(--sp));
  transform-origin:left;
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  z-index:5
}
.operations{
  background:#111319;
  color:#f1f1e9;
  padding:100px var(--pad) 110px;
  position:relative;
  overflow:hidden
}
.operations .section-top{
  color:#8b8e96
}
.ops-heading{
  font-size:clamp(40px,5.3vw,84px);
  line-height:1.25;
  font-weight:500;
  letter-spacing:-.06em;
  margin:50px 0 65px
}
.ops-heading span{
  color:#7d869a
}
.ops-layout{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:8vw
}
.ops-menu{
  border-top:1px solid #ffffff25
}
.ops-tab{
  display:block;
  width:100%;
  padding:26px 0;
  background:none;
  border-bottom:1px solid #ffffff25;
  text-align:left;
  color:#858b98;
  transition:color .25s
}
.ops-tab.active,.ops-tab:hover{
  color:white
}
.ops-tab .row{
  display:flex;
  justify-content:space-between;
  font-size:18px;
  letter-spacing:-.02em
}
.ops-tab p{
  font-size:12px;
  line-height:1.9;
  color:#858b98;
  max-width:340px;
  max-height:0;
  opacity:0;
  margin:0;
  overflow:hidden;
  transition:.4s
}
.ops-tab.active p{
  max-height:100px;
  opacity:1;
  margin:17px 0 0
}
.ops-canvas{
  align-self:center;
  min-height:305px;
  position:relative;
  display:grid;
  place-items:center
}
.balance-visual{
  width:100%;
  max-width:480px
}
.balance-v-head{
  display:flex;
  justify-content:space-between;
  font:10px monospace;
  letter-spacing:.08em;
  color:#8f97a7
}
.balance-total{
  font-size:58px;
  letter-spacing:-2px;
  margin-top:27px
}
.balance-total small{
  font:12px monospace;
  color:#7d8492;
  margin-left:10px
}
.balance-bars{
  height:75px;
  display:flex;
  gap:5px;
  margin-top:35px
}
.bar{
  height:100%;
  transition:width .8s,background .8s;
  position:relative
}
.bar.available{
  background:#3255ff;
  width:77%
}
.bar.reserved{
  background:#7682b1;
  width:18%
}
.bar.frozen{
  background:#3e4454;
  width:5%
}
.balance-legend{
  display:flex;
  gap:20px;
  margin-top:18px;
  font-size:10px;
  color:#8c95aa
}
.balance-legend i{
  width:5px;
  height:5px;
  background:#3255ff;
  display:inline-block;
  margin-right:6px
}
.balance-legend span:nth-child(2) i{
  background:#7682b1
}
.balance-legend span:nth-child(3) i{
  background:#3e4454
}
.ops-note{
  margin-top:28px;
  font-size:12px;
  color:#8b94a6;
  line-height:1.8;
  min-height:44px
}
.integrations{
  padding:105px var(--pad) 110px;
  border-bottom:1px solid var(--line);
  background:#e7e9e0;
  position:relative
}
.integration-top{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:10vw;
  align-items:end;
  margin:40px 0 60px
}
.integration-top h2{
  font-size:clamp(40px,4.8vw,75px);
  font-weight:500;
  line-height:1.2;
  letter-spacing:-.06em;
  margin:0
}
.integration-top p{
  font-size:13px;
  line-height:1.9;
  color:#62685f;
  margin:0
}
.integration-layout{
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  gap:8vw;
  align-items:start
}
.integration-tabs{
  border-top:1px solid var(--line)
}
.integration-tab{
  width:100%;
  padding:20px 0;
  background:none;
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  text-align:left;
  font-size:13px;
  color:#838b7e
}
.integration-tab.active{
  color:#111319
}
.integration-tab small{
  font:10px monospace;
  color:#868c81
}
.code{
  background:#111319;
  color:#f3f5f9;
  min-height:300px
}
.code-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 25px;
  border-bottom:1px solid #ffffff15;
  font:10px monospace;
  color:#8c96a7
}
.copy-button{
  color:#a5afbf;
  background:none;
  font:10px monospace
}
.code pre{
  padding:28px;
  margin:0;
  font:12px/2.1 ui-monospace,Consolas,monospace;
  white-space:pre-wrap;
  word-break:break-word
}
.code .comment{
  color:#737d91
}
.code .key{
  color:#8fbcff
}
.code .string{
  color:#b0c5a5
}
.code-foot{
  padding:0 25px 20px;
  font:9px monospace;
  letter-spacing:.08em;
  color:#6e798b
}
.pricing{
  padding:100px var(--pad) 100px
}
.pricing-header{
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin:40px 0 50px;
  gap:25px
}
.pricing h2{
  font-size:clamp(34px,3.7vw,58px);
  line-height:1.3;
  font-weight:500;
  letter-spacing:-.055em;
  margin:0
}
.pricing-header p{
  font-size:12px;
  color:#72786f;
  max-width:250px;
  line-height:1.8
}
.price-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line)
}
.price-col{
  padding:30px 30px 25px 0;
  position:relative
}
.price-col+ .price-col{
  padding-left:35px;
  border-left:1px solid var(--line)
}
.plan-name{
  font:12px monospace
}
.plan-rate{
  font-size:78px;
  letter-spacing:-5px;
  margin:30px 0 8px;
  font-weight:500
}
.plan-rate span{
  font-size:25px;
  letter-spacing:-1px
}
.plan-label{
  font-size:10px;
  color:#838b7a
}
.plan-month{
  font-size:13px;
  margin:30px 0 20px
}
.plan-month small{
  font-size:10px;
  color:#7e8478
}
.plan-features{
  font-size:12px;
  line-height:2;
  color:#737b6c
}
.price-col.pro .plan-rate{
  color:var(--blue)
}
.price-col.pro:before{
  content:"";
  position:absolute;
  top:-1px;
  left:35px;
  right:30px;
  height:3px;
  background:var(--blue)
}
.pricing-note{
  font-size:10px;
  color:#818778;
  margin-top:25px;
  line-height:1.9;
  border-top:1px solid var(--line);
  padding-top:22px
}
.closing{
  background:var(--blue);
  color:white;
  padding:95px var(--pad) 50px;
  position:relative;
  overflow:hidden
}
.closing-top{
  display:flex;
  justify-content:space-between;
  align-items:start;
  position:relative;
  z-index:2
}
.closing h2{
  font-size:clamp(50px,6vw,100px);
  line-height:1.2;
  font-weight:500;
  letter-spacing:-.06em;
  margin:0
}
.closing .arrow-btn{
  background:#f1f1e9;
  color:#111319;
  margin-top:15px
}
.closing p{
  font-size:13px;
  color:#ffffff9b;
  margin-top:30px;
  line-height:1.8
}
.closing-word{
  font-size:clamp(125px,24vw,370px);
  font-weight:800;
  letter-spacing:-.085em;
  line-height:1;
  margin:90px -15px -35px;
  position:relative;
  z-index:1;
  white-space:nowrap
}
.closing-word .dot{
  color:#9cb4ff
}
footer{
  padding:28px var(--pad);
  background:#163bd3;
  color:#d0daff;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:10px;
  gap:20px
}
.footer-links{
  display:flex;
  gap:25px
}
.reveal{
  opacity:0;
  transform:translateY(35px);
  transition:opacity .8s,transform 1s
}
.reveal.visible{
  opacity:1;
  transform:translateY(0)
}
.modal{
  position:fixed;
  inset:0;
  background:#080c24a6;
  backdrop-filter:blur(12px);
  z-index:100;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px
}
.modal.open{
  display:flex
}
.modal-inner{
  background:var(--paper);
  width:min(600px,100%);
  padding:45px;
  position:relative;
  box-shadow:0 35px 100px #0004
}
.modal-close{
  position:absolute;
  right:20px;
  top:16px;
  background:none;
  font-size:25px
}
.modal h2{
  font-size:34px;
  font-weight:500;
  letter-spacing:-.045em;
  line-height:1.3
}
.modal p{
  font-size:13px;
  color:#74786f;
  line-height:1.9
}
.modal-options{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:25px 0
}
.modal-option{
  padding:17px;
  background:none;
  border:1px solid #bcc2b5;
  text-align:left;
  font-size:12px
}
.modal-option.active{
  border-color:var(--blue);
  color:var(--blue);
  background:#234cff0a
}
.modal-result{
  font-size:11px;
  min-height:40px;
  line-height:1.8;
  color:#5d665a;
  margin-bottom:20px
}
.mobile-nav{
  display:none
}
.nav-status{
  font:9px monospace;
  letter-spacing:.06em;
  color:#7f877b
}
.cursor-glow{
  position:absolute;
  pointer-events:none;
  width:250px;
  height:250px;
  border-radius:50%;
  background:radial-gradient(#b9ceff40,transparent 70%);
  z-index:0;
  left:60%;
  top:30%;
  transition:transform .2s ease-out
}
.section-anchor{
  scroll-margin-top:85px
}
@media(min-width:1700px){
  .hero-copy{
    padding-top:180px
  }
  .hero-description{
    font-size:17px
  }
  .hero-art{
    right:-2%;
    width:61%
  }
}
@media(max-width:1050px){
  .nav{
    gap:20px
  }
  .nav-right .nav-status{
    display:none
  }
  .hero h1{
    font-size:8.5vw
  }
  .hero-copy{
    width:70%
  }
  .hero-art{
    right:-20%;
    width:80%;
    opacity:.85
  }
  .story-main{
    gap:4vw
  }
  .floating-tag.t1{
    right:-5px
  }
  .floating-tag.t2{
    left:-10px
  }
  .integration-layout{
    gap:5vw
  }
  .code pre{
    font-size:11px
  }
  .plan-rate{
    font-size:65px
  }
  .closing-word{
    margin-bottom:-15px
  }
}
@media(max-width:720px){
  :root{
    --pad:6vw
  }
  header{
    height:68px
  }
  .progress{
    top:66px
  }
  .logo{
    font-size:28px
  }
  .nav,.nav-right{
    display:none
  }
  .menu-btn{
    display:block
  }
  .mobile-nav.open{
    display:flex;
    position:fixed;
    top:68px;
    left:0;
    right:0;
    background:var(--paper);
    padding:25px var(--pad);
    gap:25px;
    flex-direction:column;
    border-bottom:1px solid var(--line);
    z-index:59;
    font-size:15px
  }
  .hero{
    height:940px;
    min-height:0;
    max-height:none
  }
  .hero-copy{
    padding-top:120px;
    width:100%
  }
  .hero h1{
    font-size:17vw;
    line-height:1.17;
    margin-top:26px
  }
  .hero-description{
    font-size:12px;
    max-width:300px;
    line-height:1.9
  }
  .hero-action{
    gap:20px
  }
  .arrow-btn{
    font-size:11px;
    padding:15px 18px;
    gap:30px
  }
  .text-link{
    font-size:11px
  }
  .hero-art{
    width:140%;
    height:48%;
    top:47%;
    right:-35%;
    opacity:.9
  }
  .art-label.top{
    display:none
  }
  .art-label.bottom{
    bottom:9%;
    left:25%;
    font-size:8px
  }
  .hero-bottom{
    padding:22px 0;
    grid-template-columns:1fr 1.4fr;
    font-size:9px
  }
  .hero-bottom .right{
    font-size:8px
  }
  .scroll-hint{
    gap:10px
  }
  .ticker{
    padding-top:22px;
    padding-bottom:22px;
    gap:28px
  }
  .ticker-title{
    font-size:9px
  }
  .ticker-track{
    width:max-content;
    gap:30px;
    animation:marquee 26s linear infinite
  }
  .asset-name{
    font-size:14px
  }
  .asset-name small{
    display:none
  }
  .intro{
    padding:65px var(--pad)
  }
  .intro h2{
    font-size:8vw;
    margin:30px 0
  }
  .intro-bottom{
    display:block
  }
  .intro-bottom p{
    font-size:12px
  }
  .outline-chip{
    display:inline-block;
    margin-top:25px;
    font-size:8px
  }
  .section-top{
    font-size:9px
  }
  .story{
    height:310vh
  }
  .story-sticky{
    padding:95px var(--pad) 20px;
    min-height:780px
  }
  .story-main{
    display:flex;
    flex-direction:column;
    gap:5px;
    justify-content:center;
    align-items:stretch
  }
  .story-copy{
    min-height:170px
  }
  .chapter .chapter-num{
    margin-bottom:14px;
    font-size:9px
  }
  .chapter h2{
    font-size:8.5vw;
    line-height:1.18;
    margin-bottom:15px
  }
  .chapter p{
    font-size:11px;
    line-height:1.8;
    max-width:290px;
    margin:0
  }
  .chapter .caption{
    display:none
  }
  .product-stage{
    padding:14px 18px 5px;
    flex:0
  }
  .terminal{
    max-width:350px;
    transform:none!important
  }
  .terminal-head{
    padding:14px 19px
  }
  .terminal-head .logo{
    font-size:21px
  }
  .terminal-content{
    height:280px
  }
  .screen{
    padding:19px
  }
  .screen-amount{
    font-size:28px;
    margin:9px 0 15px
  }
  .asset-option{
    padding:9px;
    font-size:10px
  }
  .asset-option b{
    width:20px;
    height:20px;
    font-size:11px
  }
  .mini-foot{
    margin-top:15px;
    padding-top:11px;
    font-size:9px
  }
  .terminal-foot{
    padding:10px 19px;
    font-size:8px
  }
  .floating-tag{
    display:none
  }
  .confirm-visual{
    height:145px
  }
  .ledger-number{
    font-size:35px;
    margin:15px 0 3px
  }
  .ledger-rows{
    margin-top:15px
  }
  .ledger-row{
    padding:9px 0;
    font-size:10px
  }
  .story-bottom{
    margin-top:15px
  }
  .story-steps{
    gap:15px
  }
  .step-link{
    font-size:9px;
    gap:6px;
    padding:12px 0
  }
  .story-bottom>.mono{
    display:none
  }
  .operations{
    padding:65px var(--pad)
  }
  .ops-heading{
    font-size:9vw;
    margin:35px 0 35px
  }
  .ops-layout{
    grid-template-columns:1fr;
    gap:25px
  }
  .ops-tab{
    padding:20px 0
  }
  .ops-tab .row{
    font-size:16px
  }
  .ops-tab p{
    font-size:11px
  }
  .ops-canvas{
    min-height:260px
  }
  .balance-total{
    font-size:50px
  }
  .balance-bars{
    height:55px
  }
  .integrations{
    padding:65px var(--pad)
  }
  .integration-top{
    grid-template-columns:1fr;
    gap:25px;
    margin:30px 0 30px
  }
  .integration-top h2{
    font-size:10vw
  }
  .integration-top p{
    font-size:12px
  }
  .integration-layout{
    grid-template-columns:1fr;
    gap:25px
  }
  .integration-tabs{
    display:flex;
    border:0;
    gap:20px
  }
  .integration-tab{
    padding:15px 0;
    font-size:11px
  }
  .integration-tab small{
    display:none
  }
  .code pre{
    font-size:10px;
    padding:20px
  }
  .code{
    min-height:280px
  }
  .pricing{
    padding:65px var(--pad)
  }
  .pricing-header{
    display:block;
    margin:30px 0
  }
  .pricing h2{
    font-size:8vw
  }
  .pricing-header p{
    font-size:11px;
    margin-top:20px
  }
  .price-grid{
    display:block
  }
  .price-col,.price-col+.price-col{
    padding:25px 0;
    border-left:0;
    border-bottom:1px solid var(--line);
    display:grid;
    grid-template-columns:1fr 1fr
  }
  .plan-name{
    grid-column:1
  }
  .plan-rate{
    grid-column:2;
    grid-row:1/4;
    font-size:62px;
    margin:0;
    text-align:right;
    align-self:center
  }
  .plan-month{
    font-size:11px;
    margin:15px 0 0
  }
  .plan-label{
    grid-column:2;
    text-align:right
  }
  .plan-features{
    grid-column:1/3;
    font-size:11px;
    margin-top:15px
  }
  .price-col.pro:before{
    left:0;
    right:auto;
    width:55px
  }
  .pricing-note{
    font-size:9px
  }
  .closing{
    padding:65px var(--pad) 35px
  }
  .closing-top{
    display:block
  }
  .closing h2{
    font-size:12vw
  }
  .closing .arrow-btn{
    margin-top:30px
  }
  .closing p{
    font-size:11px
  }
  .closing-word{
    margin:60px -5px -5px;
    font-size:24vw
  }
  footer{
    align-items:flex-start;
    flex-direction:column;
    font-size:9px;
    gap:15px
  }
  .footer-links{
    gap:20px
  }
  .modal-inner{
    padding:30px
  }
  .modal h2{
    font-size:28px
  }
  .modal-options{
    grid-template-columns:1fr
  }
  .modal-option{
    padding:13px
  }
  .nav-status{
    display:none
  }
}
@keyframes marquee{
  to{
    transform:translateX(-35%)
  }
}
@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto
  }
  *,*:before,*:after{
    animation:none!important;
    transition:none!important
  }
  .reveal{
    opacity:1;
    transform:none
  }
}
.businesses{
  padding:100px var(--pad) 110px;
  background:var(--paper);
  border-bottom:1px solid var(--line)
}
.businesses-heading{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:10vw;
  align-items:end;
  margin:40px 0 60px
}
.businesses h2{
  font-size:clamp(38px,4.8vw,75px);
  font-weight:500;
  line-height:1.25;
  letter-spacing:-.06em;
  margin:0
}
.businesses-heading p{
  font-size:14px;
  line-height:1.9;
  color:#62685f;
  max-width:380px;
  margin:0
}
.business-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line)
}
.business-item{
  padding:30px 35px 35px 0;
  border-bottom:1px solid var(--line)
}
.business-item:not(:nth-child(3n+1)){
  padding-left:35px;
  border-left:1px solid var(--line)
}
.business-num{
  font:11px monospace;
  color:var(--blue)
}
.business-item h3{
  font-size:23px;
  font-weight:500;
  letter-spacing:-.04em;
  margin:24px 0 15px
}
.business-item p{
  font-size:13px;
  line-height:1.9;
  color:#62685f;
  max-width:310px;
  margin:0
}
.business-item .business-use{
  font:10px/1.8 ui-monospace,monospace;
  color:#858c7f;
  margin-top:22px
}
@media(max-width:900px){
  .business-grid{
    grid-template-columns:repeat(2,1fr)
  }
  .business-item:not(:nth-child(3n+1)){
    padding-left:0;
    border-left:0
  }
  .business-item:nth-child(2n){
    padding-left:25px;
    border-left:1px solid var(--line)
  }
}
@media(max-width:720px){
  .businesses{
    padding:70px var(--pad)
  }
  .businesses-heading{
    grid-template-columns:1fr;
    gap:25px;
    margin:30px 0 40px
  }
  .businesses h2{
    font-size:10vw
  }
  .business-item{
    padding:24px 18px 28px 0
  }
  .business-item:nth-child(2n){
    padding-left:18px
  }
  .business-item h3{
    font-size:19px;
    line-height:1.45
  }
  .business-item p{
    font-size:12px
  }
  .business-use{
    letter-spacing:0
  }
}