:root {
  --bg: #001346;
  --panel: rgba(3, 30, 92, 0.78);
  --panel-deep: rgba(2, 22, 70, 0.92);
  --line: #087bf7;
  --line-soft: rgba(44, 147, 255, 0.58);
  --cyan: #08ddff;
  --blue: #197bff;
  --text: #f8fbff;
  --muted: #c6d2ff;
  --green: #12f480;
  --gold: #ffd63f;
  font-family: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 83% 16%, rgba(14, 133, 255, 0.52), transparent 28rem),
    radial-gradient(circle at 48% 23%, rgba(117, 38, 255, 0.24), transparent 18rem),
    linear-gradient(180deg, #021657 0%, #020b34 50%, #001845 100%);
  color: var(--text);
}

body::before,
body::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: -1;
}

body::before {
  top: 0;
  height: 42rem;
  background:
    linear-gradient(132deg, transparent 0 30%, rgba(24, 103, 248, 0.16) 31% 37%, transparent 38%),
    linear-gradient(150deg, transparent 0 45%, rgba(115, 65, 255, 0.22) 46% 50%, transparent 51%),
    radial-gradient(circle at 74% 9%, rgba(0, 223, 255, 0.42), transparent 0.18rem),
    radial-gradient(circle at 45% 18%, rgba(255, 255, 255, 0.46), transparent 0.12rem),
    radial-gradient(circle at 64% 2%, rgba(25, 123, 255, 0.52), transparent 0.13rem);
}

body::after {
  bottom: 0;
  height: 12rem;
  background:
    radial-gradient(ellipse at 84% 100%, rgba(27, 122, 255, 0.42), transparent 19rem),
    radial-gradient(ellipse at 14% 104%, rgba(30, 92, 230, 0.32), transparent 13rem);
}

button {
  font: inherit;
}

.display-only {
  pointer-events: none;
  user-select: none;
}

.page-shell {
  width: min(100%, 480px);
  margin: 0 auto;
  padding: 14px 15px 24px;
  position: relative;
}

.hero {
  min-height: 285px;
  position: relative;
}

.brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.brand-logo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  filter: drop-shadow(0 0 12px rgba(16, 189, 255, 0.72));
  flex: 0 0 auto;
}

.brand-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 25px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0;
  white-space: nowrap;
}

.brand-pill {
  padding: 4px 12px;
  border: 1px solid rgba(0, 212, 255, 0.9);
  border-radius: 20px;
  color: var(--cyan);
  font-size: 15px;
  background: linear-gradient(180deg, rgba(16, 105, 255, 0.58), rgba(4, 44, 125, 0.9));
  box-shadow: inset 0 0 12px rgba(33, 191, 255, 0.28);
}

.brand-row p {
  margin: 6px 0 0;
  color: #c9d2ff;
  font-size: 13px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 0.88fr;
  align-items: center;
  gap: 4px;
  margin-top: 20px;
}

.hero-copy {
  position: relative;
  z-index: 2;
}

.hero-copy h1 {
  margin: 0;
  font-size: clamp(34px, 10vw, 50px);
  line-height: 0.98;
  font-weight: 950;
}

.hero-copy h1 span,
.hero-copy h1 strong {
  display: block;
}

.hero-copy h1 strong {
  color: #10e6ff;
  font-size: clamp(34px, 11vw, 52px);
  text-shadow: 0 0 9px rgba(20, 214, 255, 0.95), 0 0 19px rgba(84, 30, 255, 0.9);
}

.hero-copy h1 em {
  color: #0ae8ff;
  font-style: normal;
  text-shadow: 0 0 8px rgba(14, 232, 255, 0.85);
}

.hero-copy p {
  margin: 13px 0 0;
  max-width: 220px;
  color: #dfe7ff;
  font-size: 13px;
  line-height: 1.45;
}

.hero-art {
  position: relative;
  height: 220px;
}

.orbit {
  position: absolute;
  right: 7px;
  top: 38px;
  width: 138px;
  height: 138px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle, #000 0 57%, transparent 59%),
    conic-gradient(from 20deg, #36e9ff, #435cff, #ed49ff, #42ffff, #36e9ff);
  box-shadow: 0 0 18px rgba(0, 213, 255, 0.94), 0 0 36px rgba(0, 99, 255, 0.74);
}

.orbit::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  border: 2px solid rgba(92, 224, 255, 0.78);
  box-shadow: inset 0 0 10px rgba(111, 58, 255, 0.9), 0 0 18px rgba(10, 203, 255, 0.72);
}

.orbit img {
  width: 102px;
  height: 102px;
  position: relative;
  z-index: 1;
}

.platform {
  position: absolute;
  right: -6px;
  bottom: 12px;
  width: 188px;
  height: 50px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse, rgba(33, 250, 255, 0.92) 0 16%, rgba(17, 78, 220, 0.92) 17% 45%, transparent 48%),
    radial-gradient(ellipse, rgba(0, 111, 255, 0.45), transparent 72%);
  box-shadow: 0 0 22px rgba(0, 224, 255, 0.82);
}

.parachute {
  position: absolute;
  width: 58px;
  height: 78px;
}

.parachute span {
  display: block;
  height: 36px;
  border-radius: 45px 45px 8px 8px;
  background: linear-gradient(100deg, #56efff, #1d6eff 52%, #7053ff);
  box-shadow: inset 0 -8px 15px rgba(1, 7, 78, 0.45), 0 0 13px rgba(38, 212, 255, 0.7);
}

.parachute i {
  display: block;
  width: 24px;
  height: 24px;
  margin: 14px auto 0;
  border-radius: 5px;
  background: linear-gradient(135deg, #31e5ff, #376cff 48%, #745dff);
  box-shadow: 0 0 10px rgba(0, 187, 255, 0.85);
}

.parachute-one {
  top: 4px;
  left: 8px;
}

.parachute-two {
  right: 0;
  top: 3px;
  transform: scale(0.86);
}

.coin {
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: white;
  font-size: 9px;
  font-weight: 900;
  border: 2px solid #7deaff;
  background: linear-gradient(135deg, #086cff, #24d8ff);
  box-shadow: 0 0 10px rgba(34, 217, 255, 0.9);
}

.coin-one {
  left: -4px;
  top: 62px;
}

.coin-two {
  left: 25px;
  bottom: 45px;
}

.rocket {
  position: absolute;
  right: -2px;
  bottom: 58px;
  width: 42px;
  height: 18px;
  border-radius: 60% 35% 35% 60%;
  background: linear-gradient(90deg, #f7fbff, #256fff 61%, #ff405c 62% 100%);
  transform: rotate(-42deg);
  box-shadow: 0 0 12px rgba(33, 192, 255, 0.85);
}

.stats-panel,
.steps-panel,
.network-panel,
.about-panel,
.notice {
  border: 1px solid var(--line);
  border-radius: 11px;
  background:
    linear-gradient(116deg, rgba(0, 93, 211, 0.13), transparent 34%),
    linear-gradient(180deg, rgba(4, 44, 132, 0.88), rgba(1, 24, 78, 0.8));
  box-shadow: inset 0 0 28px rgba(18, 113, 255, 0.18), 0 0 19px rgba(0, 92, 255, 0.16);
}

.stats-panel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 6px;
  padding: 12px 10px;
}

.stats-panel article {
  min-width: 0;
  text-align: center;
  padding: 0 6px;
  border-right: 1px solid rgba(93, 157, 255, 0.58);
}

.stats-panel article:last-child {
  border-right: 0;
}

.stat-icon {
  width: 40px;
  height: 40px;
  margin: 0 auto 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, #33f5ff, #1675ff 66%, #1746db);
  box-shadow: 0 0 12px rgba(32, 196, 255, 0.8);
  position: relative;
  display: grid;
  place-items: center;
}

.stat-icon img {
  width: 27px;
  height: 27px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.55));
}

.step-ring::before,
.step-ring::after,
.notice-shield::before,
.notice-shield::after {
  content: "";
  position: absolute;
}

.gift-icon::before {
  inset: 11px 9px 8px;
  border: 3px solid white;
  border-radius: 3px;
}

.gift-icon::after {
  left: 19px;
  top: 8px;
  bottom: 7px;
  border-left: 3px solid white;
}

.shield-icon::before {
  width: 20px;
  height: 23px;
  left: 10px;
  top: 7px;
  border: 3px solid white;
  clip-path: polygon(50% 0, 100% 16%, 86% 78%, 50% 100%, 14% 78%, 0 16%);
}

.shield-icon::after {
  width: 14px;
  height: 7px;
  left: 14px;
  top: 17px;
  border-left: 3px solid white;
  border-bottom: 3px solid white;
  transform: rotate(-45deg);
}

.clock-icon::before {
  inset: 8px;
  border: 3px solid white;
  border-radius: 50%;
}

.clock-icon::after {
  width: 10px;
  height: 12px;
  left: 20px;
  top: 13px;
  border-left: 3px solid white;
  border-bottom: 3px solid white;
}

.bolt-icon::before {
  width: 16px;
  height: 25px;
  left: 12px;
  top: 7px;
  background: white;
  clip-path: polygon(55% 0, 100% 0, 63% 43%, 100% 43%, 31% 100%, 45% 56%, 7% 56%);
}

.stats-panel h2 {
  margin: 0;
  font-size: clamp(12px, 3.1vw, 15px);
  line-height: 1.1;
}

.stats-panel strong {
  display: block;
  margin-top: 4px;
  color: var(--gold);
  font-size: clamp(17px, 5.2vw, 24px);
  line-height: 1;
}

.stats-panel p,
.steps-panel p,
.about-panel p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: clamp(10px, 2.9vw, 13px);
  line-height: 1.28;
}

.value-pill {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 7px auto 0;
  padding: 4px 10px;
  border: 1px solid rgba(30, 124, 255, 0.95);
  border-radius: 17px;
  color: white;
  font-size: clamp(10px, 3vw, 13px);
  font-weight: 800;
  background: rgba(24, 86, 197, 0.54);
}

.steps-panel {
  margin-top: 9px;
  padding: 11px 12px 13px;
}

.steps-panel > h2,
.panel-heading h2,
.about-copy h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: clamp(18px, 5.8vw, 26px);
  line-height: 1.05;
}

.steps-panel > h2 span,
.about-copy h2 span {
  width: 5px;
  height: 21px;
  border-radius: 5px;
  background: linear-gradient(180deg, #12f6ff, #287cff);
  box-shadow: 0 0 8px rgba(22, 230, 255, 0.9);
  flex: 0 0 auto;
}

.steps {
  display: grid;
  grid-template-columns: 1fr 24px 1fr 24px 1fr;
  align-items: center;
  gap: 4px;
  margin-top: 11px;
  text-align: center;
}

.steps article {
  min-width: 0;
  position: relative;
}

.steps b {
  position: absolute;
  z-index: 2;
  top: -5px;
  left: calc(50% + 18px);
  width: 29px;
  height: 29px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: white;
  font-size: 18px;
  background: linear-gradient(180deg, #20d7ff, #236bff);
  box-shadow: 0 0 10px rgba(31, 183, 255, 0.82);
}

.step-ring {
  position: relative;
  width: clamp(62px, 20vw, 74px);
  aspect-ratio: 1;
  margin: 8px auto 6px;
  border: 1px solid var(--line);
  border-radius: 50%;
  box-shadow: inset 0 0 17px rgba(35, 108, 255, 0.72), 0 0 18px rgba(0, 130, 255, 0.6);
  display: grid;
  place-items: center;
}

.step-ring img {
  width: 43px;
  height: 43px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.55));
}

.paper-plane::before {
  width: 33px;
  height: 27px;
  left: 19px;
  top: 22px;
  border: 3px solid white;
  clip-path: polygon(0 46%, 100% 0, 57% 100%, 42% 58%);
}

.hourglass::before {
  width: 31px;
  height: 36px;
  left: 20px;
  top: 18px;
  border: 3px solid white;
  clip-path: polygon(6% 0, 94% 0, 63% 50%, 94% 100%, 6% 100%, 37% 50%);
}

.present::before {
  inset: 23px 18px 16px;
  border: 3px solid white;
  border-radius: 4px;
}

.present::after {
  left: 35px;
  top: 18px;
  height: 39px;
  border-left: 3px solid white;
}

.steps h3 {
  margin: 0;
  font-size: clamp(12px, 3.7vw, 16px);
  line-height: 1.1;
}

.chevrons {
  color: #b4c9ff;
  font-size: 32px;
  font-weight: 900;
  text-shadow: 0 0 10px rgba(85, 148, 255, 0.9);
}

.network-panel {
  margin-top: 10px;
  padding: 10px 11px 12px;
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.panel-heading h2 {
  font-size: clamp(17px, 5vw, 22px);
}

.panel-heading p {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--green);
  font-size: 13px;
}

.panel-heading p span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px rgba(18, 244, 128, 0.9);
}

.nodes-icon {
  width: 18px;
  height: 18px;
  position: relative;
  flex: 0 0 auto;
}

.nodes-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cyan);
  clip-path: polygon(46% 0, 56% 0, 56% 42%, 88% 72%, 81% 80%, 51% 52%, 20% 80%, 13% 72%, 46% 42%);
}

.network-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 9px;
}

.network-card {
  min-width: 0;
  height: 51px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(55, 132, 255, 0.8);
  border-radius: 6px;
  color: white;
  background: rgba(3, 28, 86, 0.78);
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: inset 0 0 12px rgba(8, 66, 168, 0.45);
}

.network-card > img.chain-icon {
  display: block;
  flex-basis: 42px;
}

.network-card.active {
  border-color: var(--cyan);
  box-shadow: 0 0 12px rgba(0, 225, 255, 0.9), inset 0 0 18px rgba(0, 186, 255, 0.38);
}

.network-card span:last-child {
  min-width: 0;
  text-align: left;
}

.network-card strong,
.network-card small {
  display: block;
  line-height: 1.08;
  white-space: nowrap;
}

.network-card strong {
  font-size: clamp(12px, 3.4vw, 15px);
}

.network-card small {
  margin-top: 3px;
  color: #d9e2ff;
  font-size: clamp(11px, 3vw, 13px);
}

.chain-icon {
  width: 42px;
  height: 42px;
  width: clamp(31px, 10vw, 42px);
  height: clamp(31px, 10vw, 42px);
  max-width: 42px;
  max-height: 42px;
  min-width: 31px;
  min-height: 31px;
  border-radius: 50%;
  object-fit: contain;
  flex: 0 0 auto;
  box-shadow: 0 0 11px rgba(255, 255, 255, 0.16);
}

.address-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: clamp(15px, 4.1vw, 18px);
  font-weight: 700;
}

.address-title i {
  width: 16px;
  height: 18px;
  border-radius: 6px;
  background: var(--green);
  position: relative;
}

.address-title i::before {
  content: "";
  position: absolute;
  width: 8px;
  height: 4px;
  left: 4px;
  top: 6px;
  border-left: 2px solid #023669;
  border-bottom: 2px solid #023669;
  transform: rotate(-45deg);
}

.address-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(104px, 31vw, 128px);
  gap: 8px;
  align-items: stretch;
  margin-top: 7px;
}

.address-box {
  grid-column: 1 / -1;
  min-width: 0;
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 11px;
  border: 1px solid #1892ff;
  border-radius: 6px;
  background: rgba(1, 18, 61, 0.92);
  color: white;
  font-size: clamp(12px, 3.7vw, 17px);
  font-weight: 750;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.copy-warning {
  min-width: 0;
  align-self: center;
  color: #ffd96a;
  font-size: clamp(12px, 3.45vw, 15px);
  line-height: 1.18;
  font-weight: 800;
  text-shadow: 0 0 8px rgba(255, 196, 44, 0.32);
}

.copy-button {
  height: 44px;
  width: 100%;
  justify-self: end;
  border: 1px dashed rgba(92, 171, 255, 0.85);
  border-radius: 8px;
  color: white;
  background: linear-gradient(135deg, #096dff, #2d8dff);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: inset 0 0 15px rgba(141, 207, 255, 0.26), 0 0 10px rgba(13, 123, 255, 0.45);
}

.copy-button span:last-child {
  min-width: 48px;
  text-align: left;
  font-size: clamp(13px, 4vw, 16px);
  font-weight: 800;
}

.copy-icon {
  width: 22px;
  height: 24px;
  position: relative;
}

.copy-icon::before,
.copy-icon::after {
  content: "";
  position: absolute;
  width: 13px;
  height: 17px;
  border: 2px solid white;
  border-radius: 2px;
}

.copy-icon::before {
  left: 1px;
  top: 6px;
}

.copy-icon::after {
  right: 1px;
  top: 1px;
  background: rgba(45, 141, 255, 0.58);
}

.detail-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 10px;
  border: 1px solid rgba(28, 113, 238, 0.82);
  border-radius: 7px;
  overflow: hidden;
  background: rgba(5, 36, 112, 0.54);
}

.detail-row > div {
  min-width: 0;
  height: 39px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 6px;
  padding: 0 8px;
}

.detail-row > div:first-child {
  border-right: 1px solid rgba(74, 131, 244, 0.55);
}

.detail-row span {
  color: white;
  font-size: clamp(12px, 3.4vw, 14px);
}

.detail-row strong {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--green);
  font-size: clamp(12px, 3.7vw, 16px);
  white-space: nowrap;
}

.detail-row em {
  color: #ffdf3b;
  font-style: normal;
}

.mini-chain {
  width: 22px;
  height: 22px;
  max-width: 22px;
  max-height: 22px;
  min-width: 22px;
  min-height: 22px;
  border-radius: 50%;
  object-fit: contain;
  flex: 0 0 auto;
}

.about-panel {
  display: grid;
  grid-template-columns: 111px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 13px 12px;
}

.about-panel > img {
  width: 105px;
  height: 105px;
  filter: drop-shadow(0 0 14px rgba(20, 201, 255, 0.95));
}

.about-copy {
  min-width: 0;
}

.about-copy h2 {
  font-size: clamp(16px, 5vw, 21px);
}

.about-copy p {
  font-size: clamp(12px, 3.4vw, 15px);
  line-height: 1.35;
}

.about-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 9px;
}

.about-metrics article {
  min-width: 0;
  height: 45px;
  border: 1px solid rgba(37, 131, 255, 0.82);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px;
  background: rgba(8, 44, 127, 0.58);
}

.about-metrics i {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(91, 220, 255, 0.95);
  background: rgba(29, 91, 204, 0.8);
  box-shadow: inset 0 0 8px rgba(65, 225, 255, 0.45);
  flex: 0 0 auto;
}

.about-metrics span {
  min-width: 0;
  color: white;
  font-size: clamp(9px, 2.7vw, 12px);
  line-height: 1.22;
}

.about-metrics strong {
  color: white;
}

.about-metrics article:last-child strong {
  color: var(--green);
}

.notice {
  min-height: 47px;
  margin-top: 9px;
  padding: 9px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  text-align: center;
}

.notice-shield {
  width: 34px;
  height: 38px;
  border: 3px solid white;
  clip-path: polygon(50% 0, 100% 17%, 85% 78%, 50% 100%, 15% 78%, 0 17%);
  flex: 0 0 auto;
  position: relative;
}

.notice p {
  margin: 0;
  min-width: 0;
}

.notice strong,
.notice small {
  display: block;
}

.notice strong {
  font-size: clamp(12px, 3.3vw, 14px);
  line-height: 1.25;
}

.notice small {
  color: var(--muted);
  font-size: clamp(10px, 2.8vw, 12px);
  margin-top: 3px;
}

@media (max-width: 374px) {
  .page-shell {
    padding-left: 10px;
    padding-right: 10px;
  }

  .brand-logo {
    width: 50px;
    height: 50px;
  }

  .brand-title {
    font-size: 21px;
  }

  .brand-pill {
    padding: 3px 9px;
    font-size: 13px;
  }

  .hero-grid {
    grid-template-columns: 1fr 0.74fr;
  }

  .hero-art {
    height: 195px;
  }

  .orbit {
    width: 112px;
    height: 112px;
    right: 0;
  }

  .orbit img {
    width: 82px;
    height: 82px;
  }

  .platform {
    width: 145px;
  }

  .network-tabs {
    gap: 5px;
  }

  .network-card {
    height: 47px;
    gap: 5px;
    padding: 0 4px;
  }

  .network-card > img.chain-icon {
    flex-basis: 31px;
  }

  .address-row {
    grid-template-columns: minmax(0, 1fr) 86px;
    gap: 6px;
  }

  .copy-button {
    gap: 4px;
  }

  .copy-button span:last-child {
    min-width: 43px;
  }

  .about-panel {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 8px;
  }

  .about-panel > img {
    width: 74px;
    height: 74px;
  }

  .about-metrics {
    gap: 4px;
  }

  .about-metrics article {
    height: 42px;
    padding: 3px;
  }

  .about-metrics i {
    display: none;
  }
}