:root {
  --holder-black: #070707;
  --holder-panel: #111111;
  --holder-bone: #f2efe6;
  --holder-muted: #96968f;
  --holder-line: #30302e;
  --holder-acid: #d9ff00;
  --holder-orange: #ff4f2d;
  --holder-cyan: #46f4d0;
}

.holder-page {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: var(--holder-black);
  color: var(--holder-bone);
  font-family: Arial, Helvetica, sans-serif;
}

.holder-page *,
.holder-page *::before,
.holder-page *::after {
  box-sizing: border-box;
}

.holder-topbar {
  position: relative;
  z-index: 10;
  border-bottom: 1px solid var(--holder-line);
  background: rgba(7, 7, 7, 0.94);
  backdrop-filter: blur(18px);
}

.holder-topbar-inner {
  display: grid;
  grid-template-columns: 180px 1fr 210px;
  width: min(1520px, 100%);
  min-height: 92px;
  margin: 0 auto;
}

.holder-brand,
.holder-topbar-title,
.holder-home-link {
  display: flex;
  align-items: center;
  min-height: 92px;
}

.holder-brand {
  padding: 7px 20px 7px 12px;
  border-right: 1px solid var(--holder-line);
}

.holder-brand img {
  display: block;
  width: 78px;
  height: 78px;
  object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(217, 255, 0, 0.22));
}

.holder-topbar-title {
  justify-content: center;
  gap: clamp(14px, 2.8vw, 42px);
  padding: 20px 26px;
  color: var(--holder-muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.holder-topbar-title strong {
  color: var(--holder-bone);
}

.holder-live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--holder-orange);
  box-shadow: 0 0 0 5px rgba(255, 79, 45, 0.13), 0 0 18px var(--holder-orange);
  animation: holder-pulse 1.5s ease-in-out infinite;
}

.holder-home-link {
  justify-content: flex-end;
  padding: 20px 18px;
  border-left: 1px solid var(--holder-line);
  color: var(--holder-bone);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-decoration: none;
}

.holder-home-link:hover,
.holder-home-link:focus-visible {
  color: var(--holder-acid);
}

.holder-main {
  position: relative;
  width: min(1380px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(54px, 7vw, 100px) 0 clamp(70px, 8vw, 120px);
}

.holder-main::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  opacity: 0.16;
  background-image:
    linear-gradient(rgba(255,255,255,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, black, transparent 82%);
}

.holder-glow {
  position: absolute;
  z-index: -2;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(125px);
}

.holder-glow-left {
  top: 32%;
  left: -290px;
  background: rgba(70, 244, 208, 0.18);
}

.holder-glow-right {
  top: 4%;
  right: -280px;
  background: rgba(255, 79, 45, 0.18);
}

.holder-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 410px);
  gap: clamp(36px, 7vw, 110px);
  align-items: end;
  margin-bottom: clamp(44px, 6vw, 80px);
}

.holder-kicker {
  margin: 0 0 18px;
  color: var(--holder-cyan);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.18em;
}

.holder-heading h1 {
  margin: 0;
  font-size: clamp(56px, 7.5vw, 112px);
  font-weight: 950;
  line-height: 0.87;
  letter-spacing: -0.07em;
}

.holder-heading h1 em {
  display: inline-block;
  position: relative;
  margin-top: 13px;
  color: var(--holder-orange);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 800;
  letter-spacing: -0.06em;
}

.holder-heading h1 em::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -9px;
  left: 0;
  height: 8px;
  background: var(--holder-acid);
  box-shadow: 0 0 18px rgba(217, 255, 0, 0.5);
  transform: skewX(-16deg);
}

.holder-heading-note {
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--holder-acid);
}

.holder-heading-note span {
  color: var(--holder-acid);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.13em;
}

.holder-heading-note p {
  margin: 14px 0 0;
  color: #c7c6c0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.55;
}

.holder-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(390px, 0.8fr);
  gap: clamp(30px, 4vw, 64px);
  align-items: stretch;
}

.holder-signal {
  position: relative;
  display: grid;
  min-height: 620px;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--holder-line);
  background:
    radial-gradient(circle at 50% 50%, rgba(217,255,0,0.08), transparent 34%),
    linear-gradient(135deg, rgba(70,244,208,0.05), transparent 44%),
    #090909;
  box-shadow: 18px 18px 0 rgba(255, 79, 45, 0.08);
}

.holder-signal::before,
.holder-signal::after {
  content: "";
  position: absolute;
  width: 78px;
  height: 78px;
  border-color: var(--holder-acid);
  border-style: solid;
}

.holder-signal::before {
  top: 18px;
  left: 18px;
  border-width: 3px 0 0 3px;
}

.holder-signal::after {
  right: 18px;
  bottom: 18px;
  border-width: 0 3px 3px 0;
}

.holder-orbit {
  position: absolute;
  border: 1px dashed rgba(70, 244, 208, 0.32);
  border-radius: 50%;
  animation: holder-rotate 24s linear infinite;
}

.holder-orbit-one { width: 470px; height: 470px; }
.holder-orbit-two {
  width: 340px;
  height: 340px;
  border-color: rgba(255, 79, 45, 0.42);
  animation-direction: reverse;
  animation-duration: 18s;
}

.holder-signal-x {
  position: relative;
  z-index: 2;
  color: var(--holder-acid);
  font-size: clamp(190px, 28vw, 350px);
  font-weight: 950;
  line-height: 0.8;
  letter-spacing: -0.13em;
  text-shadow: 15px 12px 0 var(--holder-orange), 0 0 42px rgba(217, 255, 0, 0.28);
  transform: translateX(-0.06em) rotate(-3deg);
}

.holder-scanline {
  position: absolute;
  top: -20%;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 90px;
  opacity: 0.28;
  background: linear-gradient(to bottom, transparent, var(--holder-cyan), transparent);
  filter: blur(8px);
  animation: holder-scan 4.6s linear infinite;
}

.holder-signal-label {
  position: absolute;
  right: 28px;
  bottom: 26px;
  z-index: 4;
  color: var(--holder-muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.18em;
}

.holder-card {
  position: relative;
  align-self: center;
  border: 1px solid var(--holder-line);
  background: var(--holder-bone);
  color: #111;
  box-shadow: 14px 14px 0 #35190f;
}

.holder-card-head {
  padding: 32px 34px 30px;
  background: var(--holder-panel);
  color: var(--holder-bone);
}

.holder-card-head span {
  color: var(--holder-orange);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.15em;
}

.holder-card-head strong {
  display: block;
  margin-top: 11px;
  font-size: clamp(23px, 2.2vw, 34px);
  letter-spacing: -0.04em;
}

.holder-card-head p {
  margin: 10px 0 0;
  color: #a7a59f;
  font-size: 14px;
  line-height: 1.45;
}

.holder-steps {
  padding: 16px 34px 6px;
}

.holder-step {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 15px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid #ccc8bd;
  opacity: 0.52;
  transition: opacity 180ms ease, transform 180ms ease;
}

.holder-step > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 2px solid var(--holder-orange);
  border-radius: 50%;
  color: var(--holder-orange);
  font-size: 11px;
  font-weight: 900;
}

.holder-step strong {
  font-size: 14px;
}

.holder-step p {
  margin: 5px 0 0;
  color: #686660;
  font-size: 13px;
  line-height: 1.4;
}

.holder-step.is-active,
.holder-step.is-complete {
  opacity: 1;
}

.holder-step.is-active {
  transform: translateX(5px);
}

.holder-step.is-complete > span {
  border-color: #008b70;
  background: var(--holder-cyan);
  color: #071b17;
}

.holder-wallet-state {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 13px;
  margin: 22px 34px 14px;
  padding: 16px;
  border: 1px solid #c6c2b7;
  background: #e9e6dd;
}

.holder-state-light {
  width: 10px;
  height: 10px;
  margin-top: 3px;
  border-radius: 50%;
  background: #8b8a85;
  box-shadow: 0 0 0 4px rgba(0,0,0,0.06);
}

.holder-wallet-state strong {
  display: block;
  font-size: 12px;
  letter-spacing: 0.09em;
}

.holder-wallet-state p {
  margin: 7px 0 0;
  color: #5a5954;
  font-size: 13px;
  line-height: 1.4;
}

.holder-wallet-state[data-state="working"] .holder-state-light {
  background: var(--holder-orange);
  box-shadow: 0 0 0 4px rgba(255,79,45,0.15), 0 0 12px var(--holder-orange);
  animation: holder-pulse 1s ease-in-out infinite;
}

.holder-wallet-state[data-state="success"] {
  border-color: #008b70;
  background: rgba(70,244,208,0.18);
}

.holder-wallet-state[data-state="success"] .holder-state-light { background: #008b70; }

.holder-wallet-state[data-state="error"] {
  border-color: var(--holder-orange);
  background: rgba(255,79,45,0.1);
}

.holder-wallet-state[data-state="error"] .holder-state-light { background: var(--holder-orange); }

.holder-connect-button {
  display: flex;
  justify-content: space-between;
  width: calc(100% - 68px);
  min-height: 62px;
  margin: 0 34px;
  padding: 0 21px;
  border: 0;
  background: #0a0a0a;
  color: var(--holder-bone);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.11em;
  align-items: center;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.holder-connect-button:hover:not(:disabled),
.holder-connect-button:focus-visible:not(:disabled) {
  background: var(--holder-orange);
  color: #080808;
  transform: translateY(-2px);
}

.holder-connect-button.is-unlocked {
  background: var(--holder-acid);
  color: #070707;
}

.holder-connect-button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.holder-security-note {
  margin: 18px 34px 28px;
  color: #64625d;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}

.holder-mobile-help {
  margin: 14px 34px 0;
  padding: 14px 16px;
  border: 1px solid rgba(70, 244, 208, 0.55);
  background: rgba(70, 244, 208, 0.09);
}

.holder-mobile-help strong {
  color: #087a66;
  font-size: 12px;
  letter-spacing: 0.08em;
}

.holder-mobile-help p {
  margin: 7px 0 0;
  color: #4f514c;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.holder-mobile-help .holder-mobile-browser-note {
  color: #7a3a2c;
  font-size: 12px;
}

.holder-proof-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(42px, 6vw, 76px);
  border: 1px solid var(--holder-line);
}

.holder-proof-strip div {
  min-width: 0;
  padding: 22px 24px;
  border-right: 1px solid var(--holder-line);
  background: rgba(17,17,17,0.86);
}

.holder-proof-strip div:last-child { border-right: 0; }

.holder-proof-strip span,
.holder-proof-strip strong {
  display: block;
}

.holder-proof-strip span {
  color: var(--holder-muted);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.holder-proof-strip strong {
  margin-top: 7px;
  overflow: hidden;
  color: var(--holder-bone);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.holder-footer {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 22px max(24px, calc((100vw - 1380px) / 2));
  border-top: 1px solid var(--holder-line);
  color: #777772;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.15em;
}

@keyframes holder-pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.86); }
  50% { opacity: 1; transform: scale(1.08); }
}

@keyframes holder-rotate { to { transform: rotate(360deg); } }

@keyframes holder-scan {
  0% { transform: translateY(-120px); }
  100% { transform: translateY(780px); }
}

@media (max-width: 980px) {
  .holder-grid { grid-template-columns: 1fr; }
  .holder-signal { min-height: 470px; }
  .holder-card { width: min(620px, 100%); margin: 0 auto; }
}

@media (max-width: 720px) {
  .holder-topbar-inner {
    grid-template-columns: 70px 1fr;
    min-height: calc(64px + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
  }
  .holder-brand,
  .holder-topbar-title { min-height: 64px; }
  .holder-brand { padding: 6px; }
  .holder-brand img { width: 52px; height: 52px; }
  .holder-topbar-title { gap: 10px; padding: 12px; font-size: 9px; letter-spacing: 0.1em; }
  .holder-live-dot { width: 7px; height: 7px; }
  .holder-home-link { display: none; }
  .holder-main {
    width: min(100% - 20px, 1380px);
    padding-top: 24px;
    padding-bottom: 48px;
  }
  .holder-heading {
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 24px;
  }
  .holder-kicker { margin-bottom: 11px; font-size: 10px; }
  .holder-heading h1 { font-size: clamp(42px, 13vw, 62px); line-height: 0.9; }
  .holder-heading h1 em::after { height: 5px; }
  .holder-heading-note { display: none; }
  .holder-grid { display: flex; flex-direction: column; gap: 24px; }
  .holder-card { order: 1; box-shadow: 7px 7px 0 #35190f; }
  .holder-signal { order: 2; min-height: 190px; }
  .holder-orbit-one { width: 180px; height: 180px; }
  .holder-orbit-two { width: 128px; height: 128px; }
  .holder-signal-x { font-size: 112px; text-shadow: 8px 6px 0 var(--holder-orange), 0 0 26px rgba(217, 255, 0, 0.22); }
  .holder-signal::before,
  .holder-signal::after { width: 42px; height: 42px; }
  .holder-signal-label { right: 18px; bottom: 16px; font-size: 8px; }
  .holder-card-head { padding-top: 24px; padding-bottom: 22px; }
  .holder-card-head,
  .holder-steps { padding-right: 22px; padding-left: 22px; }
  .holder-card-head strong { font-size: 24px; }
  .holder-card-head p { font-size: 14px; }
  .holder-steps { padding-top: 9px; }
  .holder-step { padding: 14px 0; }
  .holder-step strong { font-size: 14px; }
  .holder-step p { font-size: 13px; }
  .holder-wallet-state { margin-right: 22px; margin-left: 22px; }
  .holder-connect-button {
    width: calc(100% - 44px);
    min-height: 58px;
    margin-right: 22px;
    margin-left: 22px;
    touch-action: manipulation;
  }
  .holder-mobile-help { margin-right: 22px; margin-left: 22px; }
  .holder-security-note { margin-right: 22px; margin-left: 22px; }
  .holder-proof-strip { grid-template-columns: 1fr 1fr; }
  .holder-proof-strip div:nth-child(2) { border-right: 0; }
  .holder-proof-strip div:nth-child(-n+2) { border-bottom: 1px solid var(--holder-line); }
  .holder-footer {
    flex-direction: column;
    align-items: center;
    padding-bottom: max(22px, env(safe-area-inset-bottom));
    text-align: center;
  }
}

@media (max-width: 390px) {
  .holder-topbar-title span:not(.holder-live-dot) { display: none; }
  .holder-topbar-title { justify-content: flex-start; }
  .holder-card-head,
  .holder-steps { padding-right: 18px; padding-left: 18px; }
  .holder-wallet-state,
  .holder-connect-button,
  .holder-mobile-help,
  .holder-security-note { margin-right: 18px; margin-left: 18px; }
  .holder-connect-button { width: calc(100% - 36px); }
}

@media (prefers-reduced-motion: reduce) {
  .holder-page *,
  .holder-page *::before,
  .holder-page *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}