/* Wallet & Custody — page styles */
@import url("colors_and_type.css");

/* Hero — infrastructure diagram */
.wc-diagram {
  background: linear-gradient(180deg, rgba(15,21,48,0.96), rgba(8,12,28,0.96));
  border: 1px solid rgba(155,124,255,0.25);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6), 0 0 80px rgba(155,124,255,0.14);
  padding-bottom: 18px;
}
.wc-dot { background: var(--site-violet, #9b7cff) !important; box-shadow: 0 0 0 3px rgba(155,124,255,0.25) !important; }

.wc-row { display: flex; gap: 8px; justify-content: center; padding: 14px 18px; }
.wc-row-users { padding-top: 18px; }
.wc-node { flex: 1; padding: 12px 8px; text-align: center; background: rgba(15,21,48,0.6); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; font-size: 11.5px; color: var(--site-text); font-weight: 600; line-height: 1.3; }
.wc-node span { display: block; font-family: var(--font-mono); font-size: 9.5px; color: var(--site-text-3); margin-top: 3px; letter-spacing: 0.1em; font-weight: 500; }

.wc-arrow { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 0; }
.wc-arrow-line { width: 2px; height: 16px; background: linear-gradient(180deg, rgba(155,124,255,0.6), rgba(155,124,255,0.1)); }
.wc-arrow-l { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; color: var(--site-text-3); }

.wc-platform { width: 100%; padding: 14px 16px; background: rgba(155,124,255,0.06); border: 1px solid rgba(155,124,255,0.32); border-radius: 10px; }
.wc-platform-h { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--site-violet, #9b7cff); margin-bottom: 10px; }
.wc-platform-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.wc-pill { padding: 8px 6px; text-align: center; background: rgba(15,21,48,0.6); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; font-family: var(--font-mono); font-size: 10.5px; color: var(--site-text-2); transition: all 0.3s ease; }
.wc-pill.is-pulse { background: rgba(155,124,255,0.18); border-color: var(--site-violet, #9b7cff); color: #fff; box-shadow: 0 0 12px rgba(155,124,255,0.4); }

.wc-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 18px; }
.wc-side { padding: 12px 14px; background: rgba(15,21,48,0.5); border: 1px solid rgba(255,255,255,0.07); border-radius: 8px; }
.wc-side-h { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; color: var(--site-cyan); margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.wc-side-row { font-family: var(--font-mono); font-size: 11px; color: var(--site-text-2); padding: 3px 0; }

.wc-row-chains { padding-top: 6px; }
.wc-chain { padding: 8px 14px; background: rgba(15,21,48,0.6); border: 1px solid rgba(94,255,164,0.3); border-radius: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--site-mint); font-weight: 600; }

/* Security */
.wc-sec-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 48px; }
.wc-sec { padding: 22px 18px; border: 1px solid rgba(255,255,255,0.07); background: rgba(15,21,48,0.4); border-radius: 12px; position: relative; }
.wc-sec-shield { position: absolute; top: 16px; right: 18px; font-size: 16px; color: rgba(155,124,255,0.5); }
.wc-sec-n { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--site-violet, #9b7cff); margin-bottom: 12px; font-weight: 600; }
.wc-sec-t { font-weight: 600; font-size: 14px; color: var(--site-text); margin-bottom: 6px; line-height: 1.3; }
.wc-sec-d { font-size: 11.5px; color: var(--site-text-3); line-height: 1.5; }

/* UX surfaces */
.wc-ux-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 48px; }
.wc-ux { padding: 28px 22px; border: 1px solid rgba(255,255,255,0.08); background: linear-gradient(180deg, rgba(15,21,48,0.55), rgba(15,21,48,0.25)); border-radius: 14px; min-height: 160px; }
.wc-ux-n { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; margin-bottom: 14px; font-weight: 600; }
.wc-ux-a .wc-ux-n { color: var(--site-cyan); }
.wc-ux-b .wc-ux-n { color: var(--site-mint); }
.wc-ux-c .wc-ux-n { color: var(--site-violet, #9b7cff); }
.wc-ux-d .wc-ux-n { color: var(--site-amber); }
.wc-ux-e .wc-ux-n { color: var(--site-red); }
.wc-ux-f .wc-ux-n { color: var(--site-cyan); }
.wc-ux-t { font-weight: 600; font-size: 16px; color: var(--site-text); margin-bottom: 8px; }
.wc-ux-d { font-size: 12.5px; color: var(--site-text-3); line-height: 1.55; }

@media (max-width: 1100px) {
  .cx-hero-visual { margin: 0 auto; }
  .wc-sec-grid { grid-template-columns: repeat(2, 1fr); }
  .wc-ux-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .wc-sec-grid, .wc-ux-grid { grid-template-columns: 1fr; }
  .wc-platform-grid { grid-template-columns: repeat(2, 1fr); }
  .wc-split { grid-template-columns: 1fr; }
}