@font-face {
  font-family:'Cormorant';
  src:url('assets/cormorant-garamond.woff2') format('woff2');
  font-style:normal;
  font-weight:400 700;
  font-display:swap
}

@font-face {
  font-family:'Cormorant';
  src:url('assets/cormorant-garamond-italic.woff2') format('woff2');
  font-style:italic;
  font-weight:400 700;
  font-display:swap
}

@font-face {
  font-family:'Manrope';
  src:url('assets/manrope.woff2') format('woff2');
  font-style:normal;
  font-weight:400 800;
  font-display:swap
}

:root {
  --forest:#14231c;
  --forest-deep:#101c16;
  --ivory:#f3eedf;
  --parchment:#efeadd;
  --gold:#d8b771;
  --gold-light:#ebcf8d;
  --muted:#b0b7aa;
  --ink:#24382c;
  --line:rgba(218,189,123,.23);
  --max-width:1240px;
  --space:clamp(24px,5vw,80px);
  --display:'Cormorant',Georgia,serif;
  --body:'Manrope',Verdana,sans-serif;
  --radius:5px
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:96px
}

body {
  margin:0;
  background:var(--forest);
  color:var(--ivory);
  font-family:var(--body);
  font-size:14px;
  -webkit-font-smoothing:antialiased
}

body::after {
  content:'';
  pointer-events:none;
  position:fixed;
  inset:0;
  z-index:8;
  opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.7' filter='url(%23n)'/%3E%3C/svg%3E")
}

a {
  color:inherit;
  text-decoration:none
}

button {
  font:inherit;
  cursor:pointer
}

img {
  display:block;
  max-width:100%;
  object-fit:contain
}

button,a {
  -webkit-tap-highlight-color:transparent
}

button:focus-visible,a:focus-visible {
  outline:2px solid var(--gold-light);
  outline-offset:5px
}



.wrap {
  width:min(var(--max-width),calc(100% - var(--space)*2));
  margin-inline:auto
}

.skip-link {
  position:fixed;
  top:-70px;
  left:20px;
  padding:12px 20px;
  background:var(--gold);
  color:var(--forest);
  z-index:100
}

.skip-link:focus {
  top:10px
}

.site-header {
  position:sticky;
  top:0;
  z-index:20;
  height:94px;
  background:rgba(20,35,28,.95);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line)
}

.header-inner {
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}

.brand {
  display:flex;
  align-items:center;
  gap:11px;
  flex-shrink:0;
  font-family:var(--display);
  font-weight:700;
  font-size:23px;
  letter-spacing:1.6px;
  line-height:.96
}

.brand>img {
  width:46px;
  height:61px
}

.brand-sub {
  display:block;
  color:var(--gold);
  font-family:var(--body);
  font-size:8px;
  letter-spacing:3px;
  margin-top:9px;
  font-weight:600
}

.site-nav {
  display:flex;
  gap:32px;
  align-items:center
}

.site-nav>a {
  color:#bac0b5;
  font-size:12px;
  display:flex;
  gap:8px;
  align-items:center;
  position:relative;
  padding-block:14px;
  transition:color .2s
}

.site-nav>a>img {
  opacity:.65
}

.site-nav>a:hover,.site-nav>a.is-active {
  color:var(--gold-light)
}

.site-nav>a.is-active::after {
  content:'';
  width:19px;
  height:2px;
  background:var(--gold);
  position:absolute;
  bottom:0;
  left:calc(50% - 9px)
}

.header-actions {
  display:flex;
  align-items:center;
  gap:14px
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:51px;
  padding:12px 20px;
  border:1px solid transparent;
  border-radius:var(--radius);
  font-family:var(--body);
  font-size:12px;
  font-weight:700;
  transition:transform .2s,background .2s,border-color .2s,box-shadow .2s
}

.button:hover {
  transform:translateY(-3px)
}

.button-gold {
  background:var(--gold);
  color:var(--forest-deep);
  border-color:var(--gold);
  box-shadow:0 3px 0 rgba(0,0,0,.12)
}

.button-gold:hover {
  background:var(--gold-light);
  border-color:var(--gold-light);
  box-shadow:0 6px 20px rgba(221,183,105,.13)
}

.button-outline {
  border-color:rgba(230,218,184,.28);
  background:rgba(20,35,28,.3);
  color:var(--ivory)
}

.button-outline:hover {
  border-color:var(--gold);
  background:rgba(216,183,113,.07)
}

.button-arrow {
  font-weight:400;
  opacity:.7;
  margin-left:auto;
  font-size:18px;
  line-height:1
}

.header-buy {
  padding-inline:17px;
  min-height:43px;
  font-size:11px;
  gap:8px
}

.header-buy>img {
  background:var(--forest);
  padding:2px;
  border-radius:3px
}

.menu-toggle {
  display:none;
  width:43px;
  height:43px;
  background:transparent;
  border:1px solid var(--line);
  border-radius:var(--radius);
  align-items:center;
  justify-content:center
}

.dex-icon {
  mix-blend-mode:screen
}

.hero {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--forest-deep)
}

.hero-art {
  position:absolute;
  z-index:-3;
  inset:0 0 44px 31%;
  overflow:hidden
}

.hero-art>img {
  height:100%;
  width:100%;
  max-width:none;
  object-fit:cover;
  object-position:58% 50%;
  filter:saturate(.72) brightness(.91)
}

.hero-art::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,var(--forest-deep) 0%,rgba(16,28,22,.5) 20%,transparent 48%),linear-gradient(0deg,var(--forest-deep) 0%,rgba(16,28,22,.03) 38%,rgba(16,28,22,.35) 100%)
}

.hero-vignette {
  position:absolute;
  inset:0;
  z-index:-2;
  background:linear-gradient(90deg,var(--forest-deep) 0%,rgba(16,28,22,.95) 27%,rgba(16,28,22,.18) 57%,transparent 77%),linear-gradient(0deg,rgba(16,28,22,.45),transparent 35%)
}

.hero-inner {
  min-height:724px;
  position:relative;
  padding-top:75px;
  padding-bottom:109px;
  display:flex;
  align-items:flex-start
}

.hero-copy {
  position:relative;
  z-index:2;
  width:55%;
  max-width:580px
}

.eyebrow {
  font-size:10px;
  letter-spacing:2.1px;
  font-weight:700
}

.hero-eyebrow {
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--gold);
  font-size:9px;
  letter-spacing:2px;
  margin-bottom:20px
}

.little-star {
  font-size:17px;
  font-weight:400
}

h1,h2,h3,p {
  margin:0
}

h1,h2,h3 {
  font-family:var(--display);
  font-weight:600
}

h1 {
  font-size:clamp(78px,7.9vw,116px);
  line-height:.84;
  letter-spacing:-3.5px;
  margin-left:-4px
}

h1 em {
  font-weight:500;
  display:inline-block;
  color:var(--gold-light);
  margin-top:15px
}

em {
  font-family:var(--display);
  font-weight:500
}

.hero-tagline {
  font-family:var(--display);
  font-size:25px;
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:29px
}

.tagline-rule {
  width:28px;
  height:1px;
  background:var(--gold)
}

.hero-description {
  line-height:1.9;
  color:#c0c5b7;
  font-size:13px;
  margin-top:18px;
  max-width:390px
}

.hero-buttons {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  max-width:418px;
  margin-top:27px
}

.hero-buttons .button {
  justify-content:flex-start;
  gap:10px;
  font-size:11px;
  padding:12px 16px;
  min-height:53px
}

.button-icon {
  display:grid;
  place-items:center;
  background:var(--forest);
  width:28px;
  height:28px;
  border-radius:3px;
  flex-shrink:0
}

.hero-note {
  color:#9da793;
  letter-spacing:1.7px;
  font-size:8px;
  font-weight:500;
  display:flex;
  gap:9px;
  align-items:center;
  margin-top:19px
}

.hero-note strong {
  font-weight:600;
  color:var(--gold)
}

.hero-scroll {
  position:absolute;
  bottom:39px;
  left:0;
  display:flex;
  gap:10px;
  align-items:center;
  font-size:10px;
  color:#c4c8b6;
  letter-spacing:.4px
}

.hero-scroll>span {
  font-size:18px;
  margin-left:12px;
  color:var(--gold)
}

.hero-chapter {
  position:absolute;
  right:0;
  bottom:44px;
  font-size:8px;
  letter-spacing:2.1px;
  color:#bcbfae;
  display:flex;
  gap:14px
}

.hero-chapter>span {
  color:var(--gold)
}

.knight-seal {
  position:absolute;
  right:-12px;
  bottom:130px;
  width:134px;
  height:134px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  color:var(--gold-light);
  border:1px solid rgba(232,201,134,.65);
  border-radius:50%;
  outline:1px solid rgba(232,201,134,.35);
  outline-offset:-7px;
  background:rgba(17,29,23,.45);
  transform:rotate(11deg)
}

.knight-seal>span {
  font-size:7px;
  letter-spacing:1.5px
}

.knight-seal>img {
  height:63px
}

.legend-ribbon {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#213529;
  overflow:hidden;
  height:48px;
  display:flex;
  align-items:center
}

.ribbon-inner {
  display:flex;
  gap:38px;
  align-items:center;
  white-space:nowrap;
  width:max-content;
  animation:ribbon 50s linear infinite;
  will-change:transform
}

.ribbon-inner span {
  font-size:10px;
  letter-spacing:2.6px;
  color:#d9dcc5;
  font-weight:600
}

.ribbon-inner b {
  font-size:18px;
  color:var(--gold);
  font-weight:400
}

.hero-sparks {
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1
}

.hero-sparks i {
  position:absolute;
  width:3px;
  height:3px;
  background:#edc56e;
  box-shadow:0 0 9px 3px rgba(236,184,69,.3);
  border-radius:50%;
  animation:ember 7s ease-in-out infinite;
  opacity:0
}

.hero-sparks i:nth-child(1) {
  left:57%;
  top:63%;
  animation-delay:1s
}

.hero-sparks i:nth-child(2) {
  left:72%;
  top:42%;
  animation-delay:3s
}

.hero-sparks i:nth-child(3) {
  left:89%;
  top:63%;
  animation-delay:5s
}

.hero-sparks i:nth-child(4) {
  left:65%;
  top:75%;
  animation-delay:2s
}

.hero-sparks i:nth-child(5) {
  left:82%;
  top:30%;
  animation-delay:4s
}

.hero-sparks i:nth-child(6) {
  left:49%;
  top:79%;
  animation-delay:6s
}

.roadmap {
  position:relative;
  background:var(--parchment);
  color:var(--ink);
  padding:72px 0 47px
}

.section-topline {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-bottom:28px;
  border-bottom:1px solid rgba(49,68,48,.17)
}

.roadmap .eyebrow {
  font-size:9px;
  color:#506345
}

.section-ornament {
  color:#9f8956;
  font-size:14px;
  letter-spacing:8px
}

.small-caption {
  font-size:8px;
  font-weight:600;
  letter-spacing:1.7px;
  color:#66715e
}

.roadmap-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:30px;
  margin-top:36px
}

.roadmap h2,.market h2 {
  font-size:clamp(45px,4.7vw,68px);
  line-height:.99;
  letter-spacing:-1.7px
}

.roadmap h2 em {
  color:#75805b
}

.roadmap-heading>p {
  font-size:12px;
  line-height:1.9;
  color:#606958;
  max-width:320px;
  padding-bottom:5px
}

.quest-path {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:47px;
  margin-top:49px
}

.quest-step {
  min-width:0
}

.step-marker {
  height:67px;
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:21px;
  border-bottom:1px solid #b4b49b;
  padding-bottom:18px
}

.step-marker::after {
  position:absolute;
  content:'';
  height:7px;
  width:7px;
  background:#647450;
  border:3px solid var(--parchment);
  outline:1px solid #919a78;
  border-radius:50%;
  bottom:-4px;
  left:0
}

.step-marker>span {
  font-family:var(--display);
  font-size:45px;
  line-height:1;
  color:#87916d;
  font-style:italic
}

.step-marker img {
  filter:drop-shadow(0 2px 4px rgba(63,56,20,.15))
}

.step-kicker {
  font-size:8px;
  letter-spacing:1.4px;
  font-weight:700;
  color:#7b8069;
  margin-bottom:10px
}

.quest-step h3 {
  font-size:34px;
  font-weight:600;
  letter-spacing:-.6px;
  margin-bottom:12px
}

.quest-step>p:not(.step-kicker) {
  font-size:12px;
  line-height:1.9;
  color:#66705f;
  max-width:330px;
  min-height:64px
}

.quest-step ul {
  list-style:none;
  padding:0;
  margin:20px 0 23px
}

.quest-step li {
  font-size:11px;
  color:#41573f;
  display:flex;
  gap:10px;
  line-height:1.65;
  margin:8px 0
}

.quest-step li::before {
  content:'✦';
  font-size:10px;
  color:#97946d
}

.phase-label {
  font-size:7px;
  letter-spacing:1px;
  color:#758266;
  border-top:1px solid rgba(72,94,58,.15);
  padding-top:14px;
  display:flex;
  align-items:center;
  gap:9px
}

.phase-label>span {
  color:#9b8b51
}

.roadmap-footnote {
  border-top:1px solid rgba(49,68,48,.15);
  margin-top:43px;
  padding-top:22px;
  text-align:center;
  font-size:10px;
  color:#828770
}

.roadmap-footnote>span {
  color:#a08e58;
  margin-right:9px
}

.market {
  position:relative;
  background:radial-gradient(ellipse at 0 30%,#233a2d 0%,var(--forest) 60%);
  padding:70px 0 47px
}

.market .section-topline {
  border-color:var(--line)
}

.market .eyebrow {
  color:var(--gold);
  font-size:9px
}

.market .small-caption {
  color:#95a089
}

.market-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:30px;
  margin-top:36px
}

.market h2 em {
  color:var(--gold)
}

.market-heading p {
  color:#a6b09d;
  font-size:11px;
  line-height:1.8;
  margin-top:19px
}

.market-heading>.button {
  margin-bottom:4px;
  gap:12px;
  font-size:10px;
  min-height:43px;
  padding:10px 17px
}

.chart-shell {
  margin-top:32px;
  border:1px solid rgba(223,196,134,.27);
  border-radius:7px;
  overflow:hidden;
  background:#111d18;
  box-shadow:0 16px 65px rgba(0,0,0,.1)
}

.chart-toolbar {
  height:61px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 23px;
  border-bottom:1px solid var(--line);
  background:rgba(41,58,46,.35);
  gap:16px
}

.chart-token {
  display:flex;
  gap:12px;
  align-items:center
}

.chart-token strong {
  font-size:12px;
  font-weight:600;
  letter-spacing:.5px
}

.chart-token>span {
  font-size:10px;
  color:#8f9b86;
  border-left:1px solid var(--line);
  padding-left:12px
}

.chart-provider {
  display:flex;
  gap:8px;
  align-items:center;
  font-size:8px;
  font-weight:600;
  letter-spacing:1px;
  color:#9ca892
}

.chart-body {
  position:relative;
  height:424px
}

.chart-body iframe {
  width:100%;
  height:100%;
  border:0;
  display:block
}

.chart-placeholder {
  height:100%;
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden
}

.chart-grid {
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(158,185,151,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(158,185,151,.035) 1px,transparent 1px);
  background-size:70px 60px;
  mask-image:radial-gradient(ellipse at center,#000 20%,transparent 80%)
}

.chart-awaiting {
  text-align:center;
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center
}

.chart-awaiting>img {
  margin-bottom:16px;
  opacity:.75
}

.chart-awaiting .eyebrow {
  font-size:7px;
  letter-spacing:1.8px
}

.chart-awaiting h3 {
  font-size:38px;
  line-height:1.03;
  margin-top:12px;
  color:#d9dec8
}

.chart-awaiting>p:not(.eyebrow) {
  font-size:10px;
  line-height:1.8;
  color:#8d9b85;
  margin-top:12px
}

.chart-awaiting .button {
  min-height:38px;
  margin-top:20px;
  font-size:9px;
  padding:10px 15px;
  gap:10px
}

.chart-awaiting .x-icon {
  filter:brightness(0)
}

.market-bottom {
  display:flex;
  justify-content:space-between;
  gap:15px;
  align-items:center;
  margin-top:25px;
  color:#94a18a;
  font-size:10px
}

.text-link {
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--gold);
  font-size:11px
}

.text-link>span {
  font-size:17px
}

.site-footer {
  background:var(--forest-deep);
  border-top:1px solid var(--line);
  padding:26px 0
}

.footer-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px
}

.footer-brand {
  font-size:17px;
  gap:7px
}

.footer-brand>img {
  width:32px;
  height:42px
}

.footer-brand .brand-sub {
  font-size:6px;
  letter-spacing:2px;
  margin-top:6px
}

.footer-inner>p {
  font-family:var(--display);
  font-size:17px;
  font-style:italic;
  color:#b6bda9;
  text-align:center
}

.footer-inner>p>span {
  display:block;
  font-family:var(--body);
  font-style:normal;
  font-size:8px;
  letter-spacing:.4px;
  color:#7c8b75;
  margin-top:6px
}

.footer-socials {
  display:flex;
  gap:10px
}

.footer-socials a {
  height:35px;
  width:35px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  transition:border-color .2s,transform .2s
}

.footer-socials a:hover {
  border-color:var(--gold);
  transform:translateY(-2px)
}

.toast {
  position:fixed;
  z-index:50;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  width:max-content;
  max-width:calc(100% - 32px);
  padding:16px 23px;
  font-size:12px;
  line-height:1.6;
  color:var(--ivory);
  background:#263b2d;
  border:1px solid var(--gold);
  border-radius:var(--radius);
  box-shadow:0 6px 30px #0006;
  text-align:center
}

.contract-row {
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:15px;
  max-width:418px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:10px;
  font-size:10px
}

.contract-label {
  color:var(--gold)
}

.contract-row code {
  font-size:9px;
  overflow-wrap:anywhere;
  min-width:0
}

.contract-row button {
  border:0;
  background:transparent;
  color:var(--gold);
  display:flex;
  align-items:center;
  gap:5px;
  margin-left:auto;
  font-size:10px
}

.js-reveal [data-reveal] {
  opacity:0;
  transform:translateY(20px);
  transition:opacity .7s ease,transform .7s ease
}

.js-reveal [data-reveal].is-visible {
  opacity:1;
  transform:none
}

.quest-step:nth-child(2) {
  transition-delay:.1s
}

.quest-step:nth-child(3) {
  transition-delay:.2s
}

@keyframes ember {
  0%,100% {
    opacity:0;
    transform:translate(0,20px)
  }
  35% {
    opacity:.7
  }
  70% {
    opacity:.2;
    transform:translate(12px,-50px)
  }
}

@keyframes ribbon {
  to {
    transform:translateX(-50%)
  }
}

@media(min-width:1600px) {
  .hero-art {
    left:39%
  }
  .hero-inner {
    min-height:785px;
    padding-top:98px
  }
  .hero-copy {
    width:52%
  }
  .hero-art>img {
    object-position:50% 48%
  }
}

@media(max-width:1100px) {
  .site-nav {
    gap:18px
  }
  .site-nav>a {
    font-size:11px
  }
  .hero-inner {
    min-height:690px
  }
  .hero-art {
    left:25%
  }
  .hero-vignette {
    background:linear-gradient(90deg,var(--forest-deep) 0%,rgba(16,28,22,.92) 27%,rgba(16,28,22,.15) 66%,transparent)
  }
  .hero-copy {
    width:59%
  }
  .knight-seal {
    width:108px;
    height:108px;
    right:0
  }
  .knight-seal>span {
    font-size:6px;
    letter-spacing:1px
  }
  .knight-seal>img {
    height:49px
  }
  .quest-path {
    gap:28px
  }
  .quest-step h3 {
    font-size:30px
  }
  .roadmap-heading>p {
    font-size:11px
  }
  .hero-chapter {
    font-size:7px;
    letter-spacing:1.3px
  }
}

@media(max-width:799px) {
  :root {
    --space:25px
  }
  .site-header {
    height:78px
  }
  html {
    scroll-padding-top:92px
  }
  .brand {
    font-size:20px;
    gap:8px
  }
  .brand>img {
    width:36px;
    height:49px
  }
  .brand-sub {
    font-size:7px;
    letter-spacing:2.2px;
    margin-top:7px
  }
  .header-inner {
    gap:12px
  }
  .header-actions {
    gap:10px
  }
  .header-buy {
    font-size:10px;
    min-height:40px;
    padding:9px 12px;
    gap:5px
  }
  .menu-toggle {
    display:flex
  }
  .site-nav {
    display:none;
    position:absolute;
    top:77px;
    left:0;
    right:0;
    background:#172a20;
    border-bottom:1px solid var(--line);
    padding:18px 25px;
    gap:5px;
    box-shadow:0 10px 30px #0003
  }
  .site-nav.is-open {
    display:flex;
    flex-direction:column;
    align-items:stretch
  }
  .site-nav>a {
    font-size:13px;
    padding:15px 0;
    gap:12px
  }
  .site-nav>a.is-active::after {
    left:auto;
    right:0;
    bottom:50%;
    height:5px;
    width:5px;
    border-radius:50%
  }
  .hero-inner {
    min-height:760px;
    padding-top:51px;
    padding-bottom:330px
  }
  .hero-copy {
    width:85%;
    max-width:520px
  }
  h1 {
    font-size:88px
  }
  .hero-art {
    inset:270px -8% 48px 5%;
    opacity:.87
  }
  .hero-art>img {
    object-position:55% 61%;
    object-fit:cover
  }
  .hero-art::after {
    background:linear-gradient(0deg,var(--forest-deep),transparent 45%,var(--forest-deep) 100%)
  }
  .hero-vignette {
    background:linear-gradient(90deg,rgba(16,28,22,.75),rgba(16,28,22,.1) 70%),linear-gradient(0deg,rgba(16,28,22,.4),transparent 48%)
  }
  .hero-description {
    max-width:330px;
    font-size:12px
  }
  .hero-tagline {
    font-size:23px
  }
  .hero-buttons {
    max-width:386px
  }
  .hero-buttons .button {
    background:rgba(20,35,28,.75);
    backdrop-filter:blur(7px)
  }
  .hero-buttons .button-gold {
    background:var(--gold)
  }
  .hero-note {
    font-size:7px
  }
  .knight-seal {
    bottom:111px;
    right:0
  }
  .hero-chapter {
    display:none
  }
  .hero-scroll {
    bottom:32px
  }
  .roadmap,.market {
    padding-top:47px
  }
  .small-caption {
    display:none
  }
  .section-topline {
    padding-bottom:20px
  }
  .section-ornament {
    font-size:12px
  }
  .roadmap-heading,.market-heading {
    align-items:flex-start;
    gap:23px;
    margin-top:29px
  }
  .roadmap-heading {
    flex-direction:column
  }
  .roadmap h2,.market h2 {
    font-size:56px
  }
  .roadmap-heading>p {
    font-size:12px;
    max-width:100%
  }
  .desktop-break {
    display:none
  }
  .quest-path {
    gap:25px;
    grid-template-columns:1fr;
    margin-top:27px
  }
  .quest-step {
    position:relative;
    padding-left:75px;
    padding-bottom:24px;
    border-bottom:1px solid #cbcdb8
  }
  .step-marker {
    position:absolute;
    left:0;
    top:0;
    height:100%;
    width:49px;
    border-bottom:0;
    border-right:1px solid #b4b49b;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    gap:15px;
    padding-right:15px;
    padding-bottom:0;
    margin:0
  }
  .step-marker::after {
    bottom:auto;
    top:0;
    left:auto;
    right:-4px
  }
  .step-marker>span {
    font-size:38px
  }
  .step-marker img {
    width:30px;
    height:38px
  }
  .quest-step h3 {
    font-size:32px
  }
  .quest-step>p:not(.step-kicker) {
    font-size:12px;
    min-height:0;
    max-width:none
  }
  .quest-step ul {
    margin-top:16px;
    margin-bottom:17px
  }
  .quest-step li {
    font-size:11px
  }
  .phase-label {
    font-size:7px
  }
  .roadmap-footnote {
    margin-top:25px;
    border:0;
    padding-top:0;
    font-size:9px;
    line-height:1.7
  }
  .market-heading {
    flex-direction:column
  }
  .market-heading>div>p {
    font-size:11px;
    max-width:260px
  }
  .chart-shell {
    margin-top:23px
  }
  .chart-toolbar {
    padding:10px 14px
  }
  .chart-token {
    gap:8px
  }
  .chart-token>span {
    display:none
  }
  .chart-provider {
    font-size:7px;
    letter-spacing:.5px
  }
  .chart-token strong {
    font-size:10px
  }
  .chart-body {
    height:400px
  }
  .market-bottom {
    font-size:9px;
    align-items:flex-start
  }
  .market-bottom>span {
    max-width:190px;
    line-height:1.7
  }
  .text-link {
    font-size:10px;
    gap:5px;
    white-space:nowrap
  }
  .footer-inner {
    flex-wrap:wrap;
    gap:20px
  }
  .footer-inner>p {
    order:3;
    width:100%;
    font-size:16px;
    border-top:1px solid var(--line);
    padding-top:20px
  }
  .footer-socials {
    margin-left:auto
  }
}

@media(max-width:450px) {
  :root {
    --space:21px
  }
  .brand {
    font-size:17px
  }
  .brand>img {
    width:31px
  }
  .brand-sub {
    font-size:6px;
    letter-spacing:1.8px
  }
  .header-buy {
    font-size:9px;
    padding-inline:8px
  }
  .header-buy>img {
    height:20px;
    width:20px
  }
  .header-actions {
    gap:7px
  }
  .menu-toggle {
    height:39px;
    width:36px
  }
  .hero-inner {
    min-height:855px;
    padding-top:43px;
    padding-bottom:330px
  }
  .hero-copy {
    width:100%
  }
  .hero-eyebrow {
    font-size:7px;
    letter-spacing:1.4px;
    margin-bottom:23px
  }
  h1 {
    font-size:clamp(66px,20.7vw,81px);
    letter-spacing:-2px
  }
  .hero-tagline {
    font-size:22px;
    margin-top:22px
  }
  .hero-description {
    font-size:11px;
    line-height:1.9;
    margin-top:15px;
    max-width:280px
  }
  .hero-buttons {
    gap:9px;
    margin-top:23px
  }
  .hero-buttons .button {
    padding:10px 11px;
    font-size:10px;
    gap:7px;
    min-height:51px
  }
  .hero-note {
    font-size:6px;
    letter-spacing:1px
  }
  .hero-art {
    inset:345px -23% 48px -8%
  }
  .hero-art>img {
    object-position:56% 54%
  }
  .knight-seal {
    width:94px;
    height:94px;
    bottom:111px
  }
  .knight-seal>span {
    font-size:5px
  }
  .knight-seal>img {
    height:43px
  }
  .hero-scroll {
    font-size:9px;
    bottom:33px
  }
  .ribbon-inner {
    gap:24px
  }
  .ribbon-inner span {
    font-size:8px
  }
  .legend-ribbon {
    height:42px
  }
  .roadmap h2,.market h2 {
    font-size:47px
  }
  .section-topline>.eyebrow {
    font-size:8px;
    letter-spacing:1.5px
  }
  .section-ornament {
    letter-spacing:5px
  }
  .quest-step {
    padding-left:62px
  }
  .step-marker {
    width:39px;
    padding-right:10px
  }
  .quest-step h3 {
    font-size:29px
  }
  .quest-step>p:not(.step-kicker) {
    font-size:12px
  }
  .quest-step li {
    font-size:11px
  }
  .phase-label {
    font-size:6px;
    gap:6px
  }
  .chart-provider {
    font-size:6px
  }
  .chart-awaiting h3 {
    font-size:35px
  }
  .chart-awaiting .eyebrow {
    font-size:6px
  }
  .chart-awaiting>img {
    width:54px;
    height:54px
  }
  .market-bottom>span {
    max-width:155px
  }
  .footer-socials {
    gap:7px
  }
  .footer-socials a {
    height:32px;
    width:32px
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
  .js-reveal [data-reveal] {
    opacity:1;
    transform:none
  }
  .hero-sparks {
    display:none
  }
}

/* Runtime visibility must override every component display rule. */
[hidden] { display: none !important; }