:root{
  --bg:#ffffff; --tint:#f5f7fb; --ink:#0a0e1a; --muted:#5b6172; --faint:#8a90a2;
  --line:#e7e9f1; --blue:#1a2ff0; --blue-d:#0f1fb0; --blue-tint:#eef0ff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Inter',system-ui,sans-serif; font-weight:400; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
.wrap{max-width:1080px; margin:0 auto; padding:0 24px}
.serif{font-family:'Fraunces',Georgia,serif; font-weight:400; letter-spacing:-.01em}
.label{font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--blue)}
.muted{color:var(--muted)}

/* logo mark (faithful vector of the B420 / B69 tile) */
.mark{background:var(--blue); display:grid; place-items:center; line-height:1; aspect-ratio:1; color:#fff; font-weight:800; letter-spacing:-.04em}
.mark--sm{width:32px; border-radius:8px; font-size:12.5px}
.mark--hero{width:min(272px,62vw); border-radius:23%; font-size:min(72px,16vw); box-shadow:0 30px 70px -22px rgba(26,47,240,.55), 0 4px 14px -6px rgba(26,47,240,.4)}
.mark--pair{width:min(132px,25vw); border-radius:23%; font-size:min(34px,6.6vw); box-shadow:0 24px 60px -26px rgba(26,47,240,.55)}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:8px; justify-content:center; font-weight:600; font-size:15px;
  padding:13px 24px; border-radius:999px; border:1px solid var(--blue); background:var(--blue); color:#fff;
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease; cursor:pointer;
  box-shadow:0 8px 24px -10px rgba(26,47,240,.6)}
.btn:hover{background:var(--blue-d); transform:translateY(-1px)}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--line); box-shadow:none}
.btn--ghost:hover{background:var(--tint); border-color:var(--faint)}
.btn--sm{padding:9px 18px; font-size:14px}

/* nav */
nav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.82); backdrop-filter:blur(14px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; gap:20px; height:64px}
.brand{display:flex; align-items:center; gap:11px; font-weight:700; letter-spacing:-.01em; font-size:17px; flex-shrink:0}
.nav__links{display:flex; gap:30px; margin-left:auto; font-size:14.5px; font-weight:500; color:var(--muted)}
.nav__links a:hover{color:var(--ink)}
/* cross-token link: stays visible on mobile, unlike the anchor links */
.nav__pair{display:inline-flex; align-items:center; gap:5px; flex-shrink:0; white-space:nowrap;
  font-size:14px; font-weight:700; color:var(--blue); background:var(--blue-tint);
  border-radius:999px; padding:7px 14px; transition:background .15s ease}
.nav__pair:hover{background:#e3e7ff}

/* ticker strip */
.strip{border-bottom:1px solid var(--line); background:var(--bg); overflow:hidden; white-space:nowrap}
.strip__track{display:inline-flex; animation:scroll 30s linear infinite; will-change:transform}
.strip__track span{display:inline-flex; align-items:center; gap:14px; padding:11px 0; font-size:12.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--faint)}
.strip .t{color:var(--blue); font-weight:800}
.strip .dot{width:4px; height:4px; border-radius:50%; background:var(--line); margin:0 22px}
@keyframes scroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* hero */
.hero{position:relative; text-align:center; padding:78px 0 70px}
.hero__glow{position:absolute; top:20px; left:50%; transform:translateX(-50%); width:520px; height:520px; max-width:90vw;
  background:radial-gradient(circle, rgba(26,47,240,.16), transparent 62%); filter:blur(10px); z-index:0}
.hero .wrap{position:relative; z-index:1}
.hero .mark--hero{margin:0 auto 30px; animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:translateY(0)}}
.ticker-big{font-weight:800; font-size:clamp(40px,9vw,84px); letter-spacing:-.04em; line-height:1; margin:0}
.ticker-big .d{color:var(--blue)}
.hero__kicker{margin:22px 0 0}
.hero h1{font-size:clamp(30px,5.6vw,58px); line-height:1.05; margin:14px auto 0; max-width:15ch; font-weight:400}
.hero h1 em{font-style:normal; color:var(--blue)}
.hero__sub{font-size:clamp(16px,2vw,19px); color:var(--muted); max-width:52ch; margin:20px auto 0}
.hero__cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:32px}
.ca{display:inline-flex; align-items:center; gap:10px; margin:26px auto 0; max-width:100%;
  border:1px solid var(--line); background:var(--tint); border-radius:12px; padding:8px 8px 8px 16px; flex-wrap:wrap; justify-content:center}
.ca .k{font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--faint)}
.ca code{font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:13px; color:var(--ink); word-break:break-all; min-width:0}
.ca button{border:1px solid var(--line); background:#fff; border-radius:8px; padding:7px 13px; font-weight:600; font-size:12.5px; cursor:pointer; color:var(--blue)}
.ca button:hover{border-color:var(--blue)}

/* stat band */
.band{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--tint)}
.band__grid{display:grid; grid-template-columns:repeat(3,1fr)}
.band__item{padding:34px 24px; text-align:center; border-left:1px solid var(--line)}
.band__item:first-child{border-left:0}
.band__item .n{font-family:'Fraunces',serif; font-weight:500; font-size:44px; line-height:1; letter-spacing:-.02em}
.band__item .n.blue{color:var(--blue)}
.band__item .l{margin-top:8px; font-size:13px; color:var(--muted); font-weight:500}

/* editorial sections */
.sec{padding:92px 0}
.sec--line{border-top:1px solid var(--line)}
.split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.split__figure{display:flex; align-items:center; justify-content:center}
.bignum{font-family:'Fraunces',serif; font-weight:300; font-size:clamp(120px,24vw,240px); line-height:.82; letter-spacing:-.03em; color:var(--blue)}
.bignum small{display:block; font-family:'Inter'; font-weight:600; font-size:14px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin-top:14px; text-align:center}
.sec h2{font-family:'Fraunces',serif; font-weight:400; font-size:clamp(30px,4.6vw,46px); line-height:1.1; letter-spacing:-.01em; margin:16px 0 0}
.sec h2 em{font-style:normal; color:var(--blue)}
.sec p{color:var(--muted); font-size:17px; margin:18px 0 0; max-width:46ch}
.sec p b{color:var(--ink); font-weight:600}

/* paired tokens figure */
.pair{display:flex; align-items:center; justify-content:center; gap:clamp(14px,3vw,26px)}
.pair__arrows{color:var(--blue); flex-shrink:0}
.pair__arrows svg{display:block}

/* how to buy */
.buy{text-align:center}
.buy .head{max-width:40ch; margin:0 auto}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:52px; border:1px solid var(--line); border-radius:18px; overflow:hidden}
.step{padding:34px 28px; text-align:left; border-left:1px solid var(--line)}
.step:first-child{border-left:0}
.step .no{font-family:'Fraunces',serif; font-size:22px; color:var(--blue); font-weight:500}
.step h3{font-size:17px; font-weight:600; margin:14px 0 8px; letter-spacing:-.01em}
.step p{margin:0; font-size:14.5px; color:var(--muted)}
.step a{color:var(--blue); font-weight:500}
.buy__cta{margin-top:44px}

/* footer */
footer{border-top:1px solid var(--line); padding:56px 0 46px}
.foot{display:flex; flex-direction:column; align-items:center; gap:22px; text-align:center}
.foot__brand{display:flex; align-items:center; gap:12px; font-weight:700; font-size:19px; letter-spacing:-.01em}
.foot__links{display:flex; gap:26px; font-size:14.5px; font-weight:500; color:var(--muted); flex-wrap:wrap; justify-content:center}
.foot__links a:hover{color:var(--blue)}
.foot code{font-family:ui-monospace,Menlo,monospace; font-size:12px; color:var(--faint); word-break:break-all; max-width:90vw}
.foot .disc{font-size:12.5px; color:var(--faint); max-width:62ch; line-height:1.6}

/* live chart */
.chart-top{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:24px; flex-wrap:wrap}
.chart-quote{text-align:right}
.chart-quote .p{font-family:'Fraunces',serif; font-weight:500; font-size:clamp(28px,4vw,38px); line-height:1; letter-spacing:-.02em}
.chart-quote .chg{font-size:14px; font-weight:600; margin-top:5px; color:var(--faint)}
.chg.up{color:#16a34a} .chg.down{color:#dc2626}
.chart-card{border:1px solid var(--line); border-radius:18px; overflow:hidden; background:#fff; box-shadow:0 18px 50px -30px rgba(10,14,26,.28)}
.chart-tf{display:flex; gap:2px; padding:10px 12px; border-bottom:1px solid var(--line)}
.chart-tf button{border:0; background:transparent; color:var(--muted); font:600 12.5px 'Inter',sans-serif; padding:6px 13px; border-radius:8px; cursor:pointer}
.chart-tf button.active{background:var(--ink); color:#fff}
.chart-tf button:hover:not(.active){background:var(--tint); color:var(--ink)}
.chart-body{position:relative; height:340px}
.chart-body canvas{display:block; width:100%; height:100%}
.chart-state{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:var(--muted); font-size:14px; text-align:center; padding:0 20px}
.chart-state .spinner{width:30px; height:30px; border:3px solid var(--line); border-top-color:var(--blue); border-radius:50%; animation:cspin .8s linear infinite}
.chart-state #c-msg:empty{display:none}
@keyframes cspin{to{transform:rotate(360deg)}}
.chart-foot{display:flex; align-items:center; justify-content:center; gap:8px; padding:12px; border-top:1px solid var(--line); color:var(--faint); font-size:12px}
.chart-foot:hover{color:var(--blue)}
.ldot{width:7px; height:7px; border-radius:50%; background:#16a34a; animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(22,163,74,.45)} 70%{box-shadow:0 0 0 7px rgba(22,163,74,0)} 100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}

@media(max-width:820px){
  .split{grid-template-columns:1fr; gap:30px; text-align:center}
  .split .split__text p{margin-left:auto; margin-right:auto}
  .split--rev .split__figure{order:-1}
  .nav__links{display:none}
  .nav__pair{margin-left:auto}
  .steps{grid-template-columns:1fr}
  .step{border-left:0; border-top:1px solid var(--line)}
  .step:first-child{border-top:0}
  .sec{padding:66px 0}
  .hero{padding:26px 0 44px}
  .hero__glow{width:340px; height:340px; top:-6px}
  .chart-body{height:260px}
}
@media(max-width:560px){
  .band__grid{grid-template-columns:1fr}
  .band__item{border-left:0; border-top:1px solid var(--line)}
  .band__item:first-child{border-top:0}
  .brand__t{display:none}          /* keep nav from overflowing: tile only */
  .nav{gap:12px}
}