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

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

:root {
  --bg:#05070d;
  --surface:#0a0d15;
  --text:#f3f5fc;
  --muted:#939bac;
  --blue:#2d67ff;
  --cyan:#71ceff;
  --line:#1c2230;
  --display:Syne,'Trebuchet MS',sans-serif;
  --body:Manrope,'Segoe UI',sans-serif;
  --radius:8px;
  --container:1280px;
  --header-height:92px;
  color-scheme:dark
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-height) + 20px)
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  font-size:15px;
  -webkit-font-smoothing:antialiased
}

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

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

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

[hidden] {
  display:none!important
}

::selection {
  background:var(--blue);
  color:white
}

:focus-visible {
  outline:2px solid var(--cyan);
  outline-offset:5px
}

.container {
  max-width:var(--container);
  width:calc(100% - 112px);
  margin-inline:auto
}

.site-header {
  height:var(--header-height);
  position:sticky;
  top:0;
  z-index:30;
  background:rgba(5,7,13,.92);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line)
}

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

.brand {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--display);
  font-weight:700;
  font-size:29px;
  letter-spacing:-1.6px;
  flex-shrink:0
}

.brand-mark {
  object-fit:contain
}

.brand-dot {
  color:var(--cyan)
}

.navigation {
  display:flex;
  gap:38px;
  align-self:stretch;
  align-items:stretch
}

.nav-link {
  display:flex;
  align-items:center;
  gap:8px;
  position:relative;
  font-size:13px;
  font-weight:600;
  color:#a4adbe;
  transition:color .2s
}

.nav-link span {
  font-size:10px;
  color:#657086;
  font-family:monospace
}

.nav-link.is-active,.nav-link:hover {
  color:white
}

.nav-link.is-active:after {
  content:'';
  position:absolute;
  bottom:-1px;
  height:2px;
  background:var(--blue);
  left:0;
  right:0
}

.button {
  height:56px;
  padding:0 20px;
  border-radius:var(--radius);
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:11px;
  font-size:13px;
  font-weight:700;
  border:1px solid transparent;
  white-space:nowrap;
  transition:background .2s,border-color .2s,box-shadow .2s,transform .2s
}

.button img {
  flex-shrink:0;
  object-fit:contain
}

.button-arrow {
  font-size:19px;
  font-weight:400;
  margin-left:auto;
  line-height:1;
  color:inherit;
  opacity:.8
}

.button-primary {
  background:var(--blue);
  color:#fff;
  border-color:#487aff;
  box-shadow:0 4px 26px #1655ff1a
}

.button-primary:hover {
  background:#467aff;
  box-shadow:0 6px 30px #1655ff45;
  transform:translateY(-2px)
}

.button-outline {
  background:#0b101ca6;
  border-color:#2a3242
}

.button-outline:hover {
  background:#131d32;
  border-color:#5b729b;
  transform:translateY(-2px)
}

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

.hero {
  position:relative;
  min-height:770px;
  overflow:hidden;
  border-bottom:1px solid var(--line);
  isolation:isolate
}

.hero-art {
  position:absolute;
  z-index:-3;
  width:80%;
  height:100%;
  right:0;
  top:0
}

.hero-art img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:100% 42%;
  opacity:.9
}

.hero-fade {
  position:absolute;
  z-index:-2;
  inset:0;
  background:linear-gradient(90deg,#05070d 0%,#05070df7 25%,#05070db8 42%,#05070d10 66%),linear-gradient(0deg,#05070d 0%,transparent 20%,transparent 80%,#05070d70 100%)
}

.hero:after {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:radial-gradient(circle,#a0baff40 .7px,transparent .8px);
  background-size:87px 91px;
  opacity:.22
}

.hero-inner {
  position:relative;
  padding-top:89px;
  padding-bottom:102px;
  min-height:700px
}

.hero-content {
  max-width:610px;
  animation:arrive .8s ease-out both
}

.eyebrow {
  font-size:10px;
  letter-spacing:2px;
  font-weight:700;
  line-height:1.7;
  margin:0;
  display:flex;
  align-items:center;
  gap:10px
}

.hero-eyebrow {
  color:#b3c0d9;
  margin-bottom:27px
}

.signal-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 13px #46aaff;
  flex-shrink:0
}

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

h1 {
  font-family:var(--display);
  font-size:clamp(62px,6.2vw,89px);
  letter-spacing:-5px;
  line-height:.99;
  font-weight:700;
  margin:0 0 27px
}

h1>span {
  display:block
}

.title-dot {
  color:var(--blue)
}

h1 .hero-subtitle {
  font-size:24px;
  letter-spacing:-.7px;
  font-weight:500;
  line-height:1.4;
  margin-top:18px;
  color:#b8c9e8
}

.hero-description {
  max-width:390px;
  line-height:1.9;
  color:#a4afc3;
  font-size:14px;
  margin-bottom:31px
}

.hero-actions {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  max-width:422px
}

.hero-signature {
  margin-top:27px;
  display:flex;
  align-items:center;
  gap:14px;
  color:#8995ac;
  font-size:10px;
  letter-spacing:.3px
}

.token-tag {
  color:var(--cyan);
  font-family:var(--display);
  font-size:15px;
  font-weight:600;
  letter-spacing:-.4px
}

.signature-line {
  width:25px;
  height:1px;
  background:#3d4a63
}

.art-caption {
  position:absolute;
  right:1px;
  bottom:102px;
  font:9px var(--body);
  letter-spacing:1.9px;
  color:#a3b7d6;
  display:flex;
  align-items:center;
  gap:13px
}

.crosshair {
  font:29px monospace;
  color:var(--cyan)
}

.caption-coordinate {
  position:absolute;
  right:0;
  top:32px;
  font-size:8px;
  opacity:.6
}

.hero-bottom {
  position:absolute;
  bottom:26px;
  left:0;
  right:0;
  display:flex;
  justify-content:space-between;
  align-items:center
}

.micro-label {
  font-size:8px;
  color:#586780;
  letter-spacing:2px
}

.scroll-link {
  display:flex;
  align-items:center;
  gap:29px;
  color:#a0aec5;
  font-size:10px
}

.scroll-link span {
  font-size:19px;
  color:var(--cyan)
}

.manifesto-strip {
  background:#090d16;
  border-bottom:1px solid var(--line)
}

.manifesto-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  min-height:87px;
  font-family:var(--display);
  font-size:12px;
  font-weight:600;
  letter-spacing:2px;
  color:#a3abc0
}

.strip-star {
  font-size:25px;
  color:#4c74be
}

.section {
  padding:105px 0 85px;
  scroll-margin-top:16px
}

.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:28px;
  margin-bottom:45px
}

.section-label {
  color:#8e9cb7;
  margin-bottom:14px;
  letter-spacing:2px
}

.section-label>span {
  color:#518bff;
  margin-right:5px
}

h2 {
  font-family:var(--display);
  font-size:42px;
  line-height:1.18;
  letter-spacing:-1.9px;
  font-weight:600;
  margin-bottom:0
}

.section-description {
  color:var(--muted);
  font-size:12px;
  line-height:1.8;
  margin-bottom:1px;
  max-width:300px
}

.roadmap {
  background:radial-gradient(ellipse at 50% 75%,#10172c70,transparent 65%)
}

.roadmap-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  position:relative;
  gap:16px
}

.phase-card {
  padding:24px 24px 0;
  border:1px solid var(--line);
  background:linear-gradient(160deg,#0d121f,#090c14);
  border-radius:10px;
  position:relative;
  overflow:hidden;
  transition:border-color .25s,transform .25s
}

.phase-card:hover {
  border-color:#334e7e;
  transform:translateY(-5px)
}

.phase-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px
}

.phase-number {
  font-family:var(--display);
  font-size:23px;
  font-weight:500;
  color:#7a9bda
}

.phase-label {
  font-size:8px;
  letter-spacing:1.6px;
  color:#7a8599
}

.phase-orbit {
  height:89px;
  width:89px;
  margin:30px auto 25px;
  position:relative;
  border-radius:50%;
  border:1px solid #31476a;
  box-shadow:inset 0 0 18px #0e2d5a80,0 0 30px #10275a40
}

.phase-orbit:before,.phase-orbit:after {
  content:'';
  position:absolute;
  border:1px solid #4c77b6;
  inset:12px;
  border-radius:50%;
  transform:rotate(-35deg) scaleX(.45)
}

.phase-orbit:after {
  transform:rotate(35deg) scaleX(.45);
  border-color:#6590cc80
}

.phase-orbit span {
  width:14px;
  height:14px;
  position:absolute;
  top:36px;
  left:36px;
  border-radius:50%;
  background:#99d7ff;
  box-shadow:0 0 20px #5eb4ff,0 0 38px #4877ff
}

.orbit-two {
  transform:rotate(45deg);
  border-style:dashed
}

.orbit-two span {
  width:22px;
  height:22px;
  top:32px;
  left:32px;
  background:#79aaff
}

.orbit-three:before {
  transform:rotate(-50deg) scaleX(.7)
}

.orbit-three:after {
  transform:rotate(60deg) scaleX(.7)
}

.orbit-three span {
  box-shadow:0 0 24px #6d94ff,0 0 50px #5161ff
}

.orbit-four {
  border-color:#8299ce
}

.orbit-four:before {
  inset:7px;
  transform:rotate(0) scaleX(.6)
}

.orbit-four:after {
  inset:7px;
  transform:rotate(90deg) scaleX(.6)
}

.orbit-four span {
  background:white;
  box-shadow:0 0 24px #8edaff,0 0 50px #467fff
}

.phase-card h3 {
  font:600 22px var(--display);
  letter-spacing:-.6px;
  margin-bottom:13px
}

.phase-card>p {
  font-size:11px;
  line-height:1.9;
  color:#929fb5;
  min-height:84px;
  margin-bottom:20px
}

.phase-card ul {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
  color:#c1c9d9;
  font-size:10px;
  min-height:87px
}

.phase-card li {
  display:flex;
  gap:9px;
  align-items:baseline;
  line-height:1.6
}

.phase-card li:before {
  content:'';
  width:4px;
  height:4px;
  flex-shrink:0;
  background:#4979d1;
  border-radius:50%;
  align-self:center
}

.phase-footer {
  border-top:1px solid var(--line);
  margin-top:29px;
  padding:18px 0;
  display:flex;
  justify-content:space-between;
  font-size:7px;
  font-weight:700;
  letter-spacing:1.5px;
  color:#7486a4
}

.phase-footer span {
  color:#79acff;
  font-size:15px;
  line-height:1
}

.roadmap-note {
  color:#68758c;
  font-size:10px;
  text-align:center;
  margin:22px 0 0
}

.market {
  padding-top:64px;
  background:radial-gradient(ellipse at 50% 55%,#0e173180,transparent 65%)
}

.chart-external {
  font-size:11px;
  height:43px;
  padding-inline:16px;
  min-width:196px
}

.chart-shell {
  border:1px solid #283249;
  border-radius:12px;
  overflow:hidden;
  background:#080c15;
  box-shadow:0 20px 80px #0004
}

.chart-toolbar {
  min-height:66px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 24px;
  gap:16px;
  border-bottom:1px solid var(--line);
  background:#0d121d
}

.chart-token {
  display:flex;
  align-items:center;
  gap:13px;
  font-size:14px
}

.chart-token strong {
  font-family:var(--display);
  font-weight:600
}

.chart-token-name {
  font-size:10px;
  color:#8190a9;
  margin-left:6px
}

.chart-status {
  font-size:9px;
  color:#8b99ae;
  display:flex;
  gap:7px;
  align-items:center;
  white-space:nowrap
}

.chart-status>span {
  height:5px;
  width:5px;
  background:#687992;
  border-radius:50%
}

.chart-status.is-connected>span {
  background:#74ceff
}

.chart-stage {
  --chart-height:540px;
  position:relative;
  height:var(--chart-height);
  background:linear-gradient(#21345433 1px,transparent 1px),linear-gradient(90deg,#21345433 1px,transparent 1px);
  background-size:80px 58px
}

.chart-placeholder {
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:38px;
  background:radial-gradient(ellipse at center,#13203b80,#080c15d9 72%)
}

.chart-placeholder-icon {
  height:65px;
  width:65px;
  padding:15px;
  margin-bottom:24px;
  border:1px solid #2c4675;
  border-radius:17px;
  box-shadow:0 0 40px #1655ff16;
  background:#13213a
}

.chart-placeholder .eyebrow {
  color:#699bea;
  font-size:8px;
  justify-content:center;
  letter-spacing:2px;
  margin-bottom:14px
}

.chart-placeholder h3 {
  font-family:var(--display);
  font-size:28px;
  font-weight:500;
  letter-spacing:-.8px;
  margin-bottom:14px
}

.chart-placeholder>p:not(.eyebrow) {
  font-size:12px;
  line-height:1.7;
  color:#8092b0;
  max-width:370px;
  margin-bottom:30px
}

.powered-by {
  color:#485b7b;
  font-size:8px;
  letter-spacing:2px
}

#dexscreener-frame {
  border:0;
  display:block;
  width:100%;
  height:100%;
  background:#0b0e15
}

.chart-bottom {
  height:44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-inline:24px;
  border-top:1px solid var(--line);
  font-size:9px;
  color:#6e809d
}

.chart-provider {
  letter-spacing:1.2px;
  font-size:8px
}

.chart-provider span {
  color:#a0bbdf;
  margin-left:7px
}

.market-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-top:36px;
  padding-inline:1px
}

.market-bottom p {
  color:#8190a9;
  line-height:1.9;
  font-size:12px;
  margin:0
}

.market-bottom strong {
  color:#d0d8e8;
  font-weight:500
}

.market-bottom .button {
  min-width:196px
}

.site-footer {
  border-top:1px solid var(--line);
  background:#070a10;
  padding:28px 0
}

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

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

.footer-inner>p {
  color:#69768e;
  font-size:9px;
  margin:0
}

.footer-socials {
  display:flex;
  gap:12px;
  margin-left:auto
}

.footer-socials a {
  width:34px;
  height:34px;
  border:1px solid var(--line);
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s
}

.footer-socials a:hover {
  background:#1d2944
}

.copyright {
  font-size:9px;
  color:#616e85;
  white-space:nowrap
}

.link-notice {
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translate(-50%,15px);
  max-width:calc(100% - 32px);
  width:max-content;
  z-index:50;
  padding:15px 23px;
  background:#15223a;
  border:1px solid #3f639a;
  box-shadow:0 10px 40px #0008;
  border-radius:9px;
  font-size:12px;
  line-height:1.5;
  opacity:0;
  visibility:hidden;
  transition:opacity .2s,transform .2s,visibility .2s;
  text-align:center
}

.link-notice.is-visible {
  opacity:1;
  visibility:visible;
  transform:translate(-50%,0)
}

.skip-link {
  position:fixed;
  left:16px;
  top:12px;
  z-index:100;
  transform:translateY(-180%);
  padding:12px;
  background:var(--blue);
  border-radius:5px;
  font-size:13px
}

.skip-link:focus {
  transform:translateY(0)
}

.noscript-notice {
  padding:15px;
  text-align:center;
  background:#14213b;
  font-size:12px
}

@keyframes arrive {
  from {
    opacity:0;
    transform:translateY(18px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}

@media(min-width:1700px) {
  .hero-art {
    width:80%;
    right:0
  }
  .hero {
    min-height:825px
  }
  .hero-inner {
    padding-top:115px
  }
  h1 {
    font-size:96px
  }
}

@media(max-width:1150px) {
  .container {
    width:calc(100% - 72px)
  }
  h1 {
    font-size:73px;
    letter-spacing:-4px
  }
  .hero-content {
    max-width:540px
  }
  .hero-art {
    right:0;
    width:95%
  }
  .hero-fade {
    background:linear-gradient(90deg,#05070d 0%,#05070dee 28%,#05070d65 56%,#05070d10 80%),linear-gradient(0deg,#05070d,transparent 25%)
  }
  .phase-card {
    padding:21px 17px 0
  }
  .phase-card h3 {
    font-size:20px
  }
  .section-description {
    font-size:11px
  }
  h2 {
    font-size:36px
  }
  .navigation {
    gap:27px
  }
  .art-caption {
    font-size:8px;
    letter-spacing:1px
  }
  .chart-token-name {
    max-width:260px
  }
  .footer-inner {
    gap:17px
  }
}

@media(max-width:900px) {
  .roadmap-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px
  }
  .phase-card {
    padding:25px 25px 0
  }
  .phase-card>p {
    min-height:62px;
    max-width:300px;
    font-size:12px
  }
  .phase-card ul {
    font-size:11px
  }
  .phase-card h3 {
    font-size:23px
  }
  .hero {
    min-height:755px
  }
  .hero-inner {
    padding-top:82px
  }
  .hero-art {
    width:110%;
    right:0;
    opacity:.8
  }
  .hero-content {
    max-width:530px
  }
  .hero-fade {
    background:linear-gradient(90deg,#05070d 0%,#05070deb 32%,#05070d30 85%),linear-gradient(0deg,#05070d,transparent 25%)
  }
  .art-caption {
    display:none
  }
  .manifesto-inner {
    font-size:9px;
    letter-spacing:1.3px
  }
  .section-heading {
    align-items:flex-start
  }
  .section-description {
    max-width:220px
  }
  .footer-inner>p {
    display:none
  }
  .navigation {
    gap:22px
  }
  .header-ticker {
    display:none
  }
  .header-buy {
    min-width:97px
  }
  .chart-token-name {
    display:none
  }
  h2 {
    font-size:33px
  }
}

@media(max-width:640px) {
  :root {
    --header-height:108px
  }
  .container {
    width:calc(100% - 40px)
  }
  .site-header {
    height:var(--header-height)
  }
  .header-inner {
    position:relative;
    height:64px;
    gap:15px
  }
  .brand {
    font-size:26px;
    gap:7px
  }
  .brand-mark {
    width:36px;
    height:36px
  }
  .header-buy {
    height:35px;
    min-width:88px;
    padding-inline:12px;
    font-size:11px
  }
  .header-buy img {
    width:17px;
    height:17px
  }
  .header-buy .button-arrow {
    font-size:16px
  }
  .navigation {
    position:absolute;
    left:0;
    right:0;
    top:64px;
    height:44px;
    justify-content:space-between;
    border-top:1px solid #1c223080;
    gap:16px
  }
  .nav-link {
    font-size:11px;
    gap:7px
  }
  .nav-link span {
    font-size:8px
  }
  .nav-link.is-active:after {
    bottom:0
  }
  .hero {
    min-height:995px
  }
  .hero-inner {
    padding-top:43px;
    padding-bottom:370px;
    min-height:955px
  }
  .hero-content {
    max-width:100%
  }
  .hero-eyebrow {
    font-size:8px;
    letter-spacing:1.5px;
    margin-bottom:25px
  }
  h1 {
    font-size:clamp(48px,10.3vw,67px);
    letter-spacing:-3.5px;
    line-height:1.04;
    margin-bottom:22px
  }
  h1 .hero-subtitle {
    font-size:19px;
    letter-spacing:-.5px;
    margin-top:13px
  }
  .hero-description {
    font-size:12px;
    line-height:1.9;
    max-width:325px;
    margin-bottom:27px
  }
  .hero-actions {
    max-width:100%;
    gap:9px
  }
  .button {
    height:51px;
    font-size:11px;
    padding-inline:13px;
    gap:9px
  }
  .button img {
    width:19px;
    height:19px
  }
  .button-arrow {
    font-size:17px
  }
  .hero-signature {
    font-size:9px;
    margin-top:23px;
    gap:10px
  }
  .token-tag {
    font-size:13px
  }
  .hero-art {
    top:auto;
    bottom:33px;
    height:450px;
    width:100%;
    right:0;
    opacity:1
  }
  .hero-art img {
    object-position:100% 52%
  }
  .hero-fade {
    background:linear-gradient(180deg,#05070d 0%,#05070d 51%,#05070dc0 60%,#05070d00 78%,#05070d 100%)
  }
  .hero-bottom {
    bottom:23px
  }
  .micro-label {
    font-size:6px;
    letter-spacing:1.3px
  }
  .scroll-link {
    font-size:8px;
    gap:10px
  }
  .scroll-link span {
    font-size:16px
  }
  .manifesto-inner {
    min-height:67px;
    gap:12px;
    flex-wrap:wrap;
    justify-content:center;
    padding:17px 0;
    font-size:8px;
    letter-spacing:1.5px
  }
  .manifesto-inner>span:last-child {
    display:none
  }
  .strip-star {
    font-size:16px
  }
  .manifesto-inner>.strip-star:nth-last-child(2) {
    display:none
  }
  .section {
    padding:65px 0 53px
  }
  .section-heading {
    flex-direction:column;
    gap:19px;
    margin-bottom:29px
  }
  .section-label {
    font-size:8px;
    margin-bottom:12px
  }
  h2 {
    font-size:30px;
    letter-spacing:-1.4px;
    line-height:1.23
  }
  .section-description {
    font-size:11px;
    max-width:100%
  }
  .section-description br {
    display:none
  }
  .roadmap-grid {
    gap:12px
  }
  .phase-card {
    padding:18px 15px 0;
    border-radius:8px
  }
  .phase-number {
    font-size:19px
  }
  .phase-label {
    font-size:6px;
    letter-spacing:1px
  }
  .phase-orbit {
    height:66px;
    width:66px;
    margin:23px auto
  }
  .phase-orbit:before,.phase-orbit:after {
    inset:9px
  }
  .phase-orbit span {
    height:11px;
    width:11px;
    top:26px;
    left:26px
  }
  .orbit-two span {
    width:16px;
    height:16px;
    top:24px;
    left:24px
  }
  .phase-card h3 {
    font-size:18px;
    letter-spacing:-.6px
  }
  .phase-card>p {
    font-size:10px;
    line-height:1.85;
    min-height:108px;
    margin-bottom:16px
  }
  .phase-card ul {
    font-size:9px;
    gap:11px;
    min-height:112px
  }
  .phase-card li {
    gap:7px;
    line-height:1.7
  }
  .phase-card li:before {
    width:3px;
    height:3px
  }
  .phase-footer {
    font-size:6px;
    letter-spacing:.8px;
    margin-top:20px;
    padding:17px 0
  }
  .roadmap-note {
    font-size:8px;
    line-height:1.8;
    margin-top:20px
  }
  .market {
    padding-top:30px
  }
  .chart-external {
    height:40px;
    min-width:183px;
    font-size:10px
  }
  .chart-toolbar {
    padding:12px 14px;
    min-height:57px;
    gap:10px
  }
  .chart-token {
    gap:8px;
    font-size:12px
  }
  .chart-token img {
    width:28px;
    height:28px
  }
  .chart-status {
    font-size:8px;
    gap:5px
  }
  .chart-stage {
    --chart-height:480px
  }
  .chart-placeholder {
    padding:25px 17px
  }
  .chart-placeholder h3 {
    font-size:23px;
    max-width:280px;
    line-height:1.3
  }
  .chart-placeholder>p:not(.eyebrow) {
    font-size:11px;
    max-width:250px
  }
  .chart-placeholder .eyebrow {
    font-size:6px;
    letter-spacing:1.7px
  }
  .chart-placeholder-icon {
    width:56px;
    height:56px;
    padding:12px
  }
  .powered-by {
    font-size:7px
  }
  .chart-bottom {
    padding-inline:14px;
    font-size:8px
  }
  .chart-provider {
    font-size:7px
  }
  .market-bottom {
    gap:23px;
    margin-top:26px;
    align-items:flex-start;
    flex-direction:column
  }
  .market-bottom p {
    font-size:11px
  }
  .market-bottom .button {
    height:47px;
    min-width:183px
  }
  .site-footer {
    padding:24px 0
  }
  .footer-inner {
    flex-wrap:wrap;
    gap:15px
  }
  .footer-brand {
    font-size:22px
  }
  .footer-socials {
    margin-left:auto
  }
  .copyright {
    width:100%;
    text-align:center;
    padding-top:6px;
    font-size:8px
  }
  .link-notice {
    font-size:11px;
    padding:13px 17px
  }
}

@media(max-width:360px) {
  .container {
    width:calc(100% - 30px)
  }
  h1 {
    font-size:44px;
    letter-spacing:-2.8px
  }
  .hero-actions .button {
    padding-inline:10px;
    gap:7px;
    font-size:10px
  }
  .phase-card {
    padding-inline:12px
  }
  .phase-card h3 {
    font-size:16px
  }
  .phase-label {
    font-size:5px
  }
  .hero-eyebrow {
    font-size:7px
  }
  .manifesto-inner {
    font-size:7px;
    gap:9px
  }
}

@media(max-width:480px) {
  .roadmap-grid {
    grid-template-columns:1fr
  }
  .phase-card {
    padding:23px 23px 0
  }
  .phase-number {
    font-size:24px
  }
  .phase-label {
    font-size:8px
  }
  .phase-orbit {
    position:absolute;
    right:22px;
    top:65px;
    margin:0
  }
  .phase-card h3 {
    font-size:23px;
    margin-top:25px
  }
  .phase-card>p {
    font-size:12px;
    line-height:1.8;
    min-height:0;
    max-width:calc(100% - 85px);
    margin-bottom:22px
  }
  .phase-card ul {
    font-size:11px;
    min-height:0;
    gap:10px
  }
  .phase-footer {
    font-size:7px;
    margin-top:24px
  }
  .hero-description {
    font-size:13px
  }
  .hero-actions .button {
    font-size:12px
  }
  .chart-placeholder>p:not(.eyebrow) {
    font-size:12px
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
  .button:hover,.phase-card:hover {
    transform:none
  }
}

/* Runtime chart and CTA state must always win over component display rules. */
[hidden] {
  display:none!important
}