#alt-whitepaper .wp-riskviz{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:8px 0}
#alt-whitepaper .wp-riskviz .radar{width:260px;height:auto}
#alt-whitepaper .wp-riskviz .grid{fill:rgba(255,255,255,.03);stroke:rgba(129,159,255,.22)}
#alt-whitepaper .wp-riskviz .axes line{stroke:rgba(129,159,255,.25)}
#alt-whitepaper .wp-riskviz .poly{fill:rgba(141,247,232,.18);stroke:#8df7e8}
#alt-whitepaper .wp-riskviz .lab{font-size:10px;fill:#cfe3ff}
#alt-whitepaper .wp-riskviz .legend{display:flex;gap:8px;align-items:center;color:#cfe3ff}
#alt-whitepaper .wp-riskviz .dot{display:inline-block;width:10px;height:10px;border-radius:50%}
#alt-whitepaper .wp-riskviz .dot.low{background:#66e0a8}
#alt-whitepaper .wp-riskviz .dot.med{background:#ffd166}
#alt-whitepaper .wp-riskviz .dot.high{background:#ff8585}

#alt-whitepaper .wp-table .sev-badge{display:inline-block;padding:2px 6px;border-radius:6px;font-weight:800;letter-spacing:.02em}
#alt-whitepaper .wp-table .sev-badge.low{background:#213e2f;color:#8ef7cf;border:1px solid rgba(142,247,207,.45)}
#alt-whitepaper .wp-table .sev-badge.med{background:#3e3521;color:#ffd166;border:1px solid rgba(255,209,102,.45)}
#alt-whitepaper .wp-table .sev-badge.high{background:#3e2124;color:#ff9aa6;border:1px solid rgba(255,154,166,.45)}
#alt-whitepaper .wp-table tr.sev-low{background:rgba(102,224,168,.06)}
#alt-whitepaper .wp-table tr.sev-med{background:rgba(255,209,102,.06)}
#alt-whitepaper .wp-table tr.sev-high{background:rgba(255,133,133,.06)}
#alt-whitepaper .wp-table-wrap{overflow:auto;border:1px solid rgba(129,159,255,.22);border-radius:12px;background:rgba(255,255,255,.04)}
#alt-whitepaper .wp-table{width:100%;border-collapse:collapse;color:#cfe3ff}
#alt-whitepaper .wp-table th, #alt-whitepaper .wp-table td{padding:10px;border-bottom:1px solid rgba(255,255,255,.08)}
#alt-whitepaper .wp-table thead{background:rgba(255,255,255,.06)}
#alt-whitepaper .wp-diagram{margin:8px 0 4px 0;display:grid;gap:8px}
#alt-whitepaper .wp-diagram .row{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}
#alt-whitepaper .wp-diagram .row.small .box{transform:scale(.96)}
#alt-whitepaper .wp-diagram .box{min-width:180px;text-align:center;padding:10px 12px;border:1px solid rgba(129,159,255,.22);background:linear-gradient(160deg, rgba(106,209,255,.10), rgba(141,247,232,.06));border-radius:12px;color:#cfe3ff;box-shadow:0 8px 22px rgba(0,0,0,.28)}
#alt-whitepaper .wp-diagram .box span{display:block;color:#9fb3e6;font-size:12px}
#alt-whitepaper .wp-diagram .arrow{color:#8df7e8;filter:drop-shadow(0 0 8px rgba(111,220,255,.45))}
* {
  box-sizing: border-box
}

html,
body {
  height: 100%
}

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: #e8eefc;
  background: radial-gradient(1200px 800px at 70% 20%, #0a1635 0%, #050a1a 60%, #030610 100%);
  overflow: hidden;
}

/* Motion variables */
:root {
  --swing-min: -6deg;
  --swing-max: 6deg;
  --swing-duration: 3.8s
}

body[data-swing="slow"] {
  --swing-duration: 4.8s
}

body[data-swing="normal"] {
  --swing-duration: 3.2s
}

body[data-swing="fast"] {
  --swing-duration: 2.2s
}

body[data-amp="low"] {
  --swing-min: -4deg;
  --swing-max: 4deg
}

body[data-amp="normal"] {
  --swing-min: -6deg;
  --swing-max: 6deg
}

body[data-amp="high"] {
  --swing-min: -10deg;
  --swing-max: 10deg
}

.side-nav {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 80px;
  display: flex;
  align-items: center;
  z-index: 40;
}

.side-nav.left {
  left: 0;
  background: linear-gradient(90deg, rgba(10, 22, 53, .3), transparent)
}

.side-nav.right {
  right: 0;
  background: linear-gradient(270deg, rgba(10, 22, 53, .3), transparent)
}

.side-nav nav {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 0 14px
}

.side-nav .nav-item {
  color: #a9b6d8;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .3px;
  font-size: 12px;
  opacity: .8;
  transform: rotate(-90deg);
  transform-origin: left center;
  white-space: nowrap;
}

.side-nav .nav-item.active,
.side-nav .nav-item:hover {
  color: #fff;
  opacity: 1
}

.side-nav .dots {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 20px
}

.side-nav .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(165, 190, 255, .35);
  box-shadow: 0 0 0 2px rgba(114, 149, 255, .15);
  transition: .2s
}

.side-nav .dot:hover {
  background: #a8c1ff
}

.side-nav .dot.active {
  background: #6fdcff;
  box-shadow: 0 0 0 3px rgba(111, 220, 255, .22)
}
/* enhanced active/hover style for right dots */
.side-nav.right .dot{transition:transform .2s ease, box-shadow .2s ease}
.side-nav.right .dot:hover{transform:scale(1.2);box-shadow:0 0 0 4px rgba(111,220,255,.28), 0 0 18px rgba(111,220,255,.25)}
.side-nav.right .dot.active{background:#6fdcff;box-shadow:0 0 0 5px rgba(111,220,255,.32), 0 0 14px rgba(111,220,255,.35)}

.hero {
  position: relative;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center
}

.brand {
  position: absolute;
  top: 24px;
  left: 96px;
  display: flex;
  gap: 12px;
  align-items: center;
  z-index: 30
}

.brand-logo{height:24px;width:auto;filter:drop-shadow(0 6px 12px rgba(0,0,0,.35))}
.brand-name{font-weight:800;letter-spacing:.4px;background:linear-gradient(90deg,#8bb8ff,#6ad1ff,#94f7e6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.brand .tag{margin-left:6px}

.brand .tag {
  font-size: 12px;
  color: #a6b7ff;
  opacity: .8
}

.grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(60% 60% at 50% 50%, #000 60%, transparent 100%);
  opacity: .35
}

.fx-bg:before {
  content: "";
  position: absolute;
  inset: -10%;
  background: radial-gradient(800px 400px at 30% 70%, rgba(111, 132, 255, .25), transparent), radial-gradient(600px 600px at 80% 20%, rgba(0, 255, 214, .18), transparent);
  filter: blur(40px);
  opacity: .8
}

.particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: .6
}

.content {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  padding: 0 120px;
  text-align: left
}

.content-centered{text-align:center}
.headline-logo{height:36px;width:auto;margin:0 auto 10px;display:block;filter:drop-shadow(0 6px 12px rgba(0,0,0,.35))}
.headline{margin-top:0}

.content h1 {
  font-size: 56px;
  line-height: 1.08;
  margin: 0 0 12px 0;
  letter-spacing: .2px
}

.subtitle {
  color: #a9b6d8;
  max-width: 820px;
  margin: 0 0 26px 0
}

.connect-wallet{margin:0 0 26px 0;display:flex;flex-direction:column;align-items:center;gap:10px}
.wallet-info{display:flex;align-items:center;gap:12px;color:#cfe3ff}
.wallet-info .addr{font-variant-numeric:tabular-nums;font-weight:700}
.wallet-info .bal{display:inline-flex;align-items:center;gap:6px}

/* ensure wallet info stays hidden until connected */
.wallet-info[hidden]{display:none !important}
/* smaller token icon inside wallet info */
.wallet-info .pay-icon{width:14px;height:14px}

/* Stake ticker */
.stake-ticker{position:relative;width:min(1100px,90%);margin:0 auto 18px;border:1px solid rgba(129,159,255,.25);background:rgba(12,24,60,.35);border-radius:14px;overflow:hidden}
.stake-track{display:flex;gap:8px;padding:8px;white-space:nowrap;animation:stakeMarquee 24s linear infinite}
.stake-item{display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border-radius:10px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.10);backdrop-filter:blur(6px);font-size:12px}
.stake-item .addr{font-variant-numeric:tabular-nums;color:#dfe7f3;font-weight:600}
.stake-item .amt{color:#8ee7cf;font-weight:700}
.stake-item .sym{color:#bbcaf3;font-weight:600}
@keyframes stakeMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)} }

.cta-row {
  display: flex;
  gap: 14px;
  margin: 22px 0 28px 0
}

.btn {
  border: 1px solid #2a3a7a;
  background: rgba(16, 35, 88, .6);
  color: #e8eefc;
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 700;
  letter-spacing: .3px;
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: .25s
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(56, 120, 255, .15)
}

.btn.primary {
  background: linear-gradient(135deg, #5caeff, #42e0ff);
  color: #0a1635;
  border: 0
}

.btn.ghost {
  background: transparent
}

.pools {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 8px 0 24px 0
}

.pool-card {
  position: relative;
  border: 1px solid rgba(129, 159, 255, .25);
  background: linear-gradient(180deg, rgba(22, 36, 86, .6), rgba(10, 20, 54, .5));
  border-radius: 16px;
  padding: 16px 16px 24px 16px;
  overflow: hidden
}

.pool-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px
}

.pool-name {
  font-weight: 700
}

.pool-name .token-icon {
  width: 18px;
  height: 18px;
  vertical-align: -4px;
  margin-right: 6px;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35)
}

.pool-apy {
  color: #9dc2ff;
  font-weight: 600
}

.rig {
  position: relative;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center
}

.pickaxe {
  height: 80px;
  opacity: .85;
  animation: swing var(--swing-duration, 3.8s) ease-in-out infinite;
  transform-origin: 70% 15%;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .35))
}

.rig.hit .pickaxe {
  animation: pickaxe-flash .35s ease-out
}

.ore {
  position: absolute;
  bottom: 14px;
  width: 70%;
  height: 10px;
  border-radius: 8px;
  filter: blur(0.5px)
}

.ore-btc {
  background: linear-gradient(90deg, #ffb703, #ff7b00)
}

.ore-eth {
  background: linear-gradient(90deg, #627eea, #2d5cff)
}

.ore-pepe {
  background: linear-gradient(90deg, #7ce454, #2ecc71)
}

/* ore glow */
.rig:before {
  content: "";
  position: absolute;
  bottom: 6px;
  width: 80%;
  height: 14px;
  border-radius: 14px;
  filter: blur(14px);
  opacity: .6;
  pointer-events: none
}

.rig[data-symbol="BTCUSDT"]:before {
  background: linear-gradient(90deg, rgba(255, 185, 60, .55), rgba(255, 123, 0, .35))
}

.rig[data-symbol="ETHUSDT"]:before {
  background: linear-gradient(90deg, rgba(98, 126, 234, .55), rgba(45, 92, 255, .35))
}

.rig[data-symbol="PEPEUSDT"]:before {
  background: linear-gradient(90deg, rgba(124, 228, 84, .55), rgba(46, 204, 113, .35))
}

@keyframes swing-hit {
  0% {
    transform: rotate(-12deg)
  }

  50% {
    transform: rotate(14deg) translateY(1px)
  }

  100% {
    transform: rotate(-6deg)
  }
}

@keyframes swing {
  0% {
    transform: rotate(var(--swing-min, -6deg))
  }

  50% {
    transform: rotate(var(--swing-max, 6deg))
  }

  100% {
    transform: rotate(var(--swing-min, -6deg))
  }
}

/* flash instead of speed-up rotation on hit */
@keyframes pickaxe-flash {
  0% {
    filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .35)) brightness(1);
  }

  50% {
    filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .4)) brightness(1.55);
  }

  100% {
    filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .35)) brightness(1);
  }
}

.live-prices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px
}

.price-card {
  border: 1px solid rgba(129, 159, 255, .25);
  background: rgba(12, 24, 60, .6);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.price-card span {
  display: inline-flex;
  align-items: center;
  gap: 6px
}

.price-card .token-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35)
}

.price-card strong {
  font-size: 18px;
  color: #cfe3ff
}

/* Pay methods */
.pay-methods{display:flex;flex-direction:column;align-items:center;gap:10px;margin:18px 0 12px}
.pay-label{color:#9fb3e6;font-weight:700;letter-spacing:.3px;opacity:.95;text-align:center}
.pay-row{display:flex;gap:12px;justify-content:center}
.btn.pay{padding:12px 18px;border-radius:999px;border:1px solid transparent;font-weight:700;letter-spacing:.2px}
.btn.pay .pay-icon{width:16px;height:16px;border-radius:50%;margin-right:8px;vertical-align:-2px;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.btn.pay.primary{background:linear-gradient(135deg,#6ad1ff,#8df7e8);color:#06122e;border:0;box-shadow:0 10px 24px rgba(90,200,255,.25);transition:transform .2s ease, box-shadow .2s ease}
.btn.pay.primary:hover{transform:translateY(-1px);box-shadow:0 14px 32px rgba(90,200,255,.32)}
.btn.pay.ghost{background:rgba(255,255,255,0.06);border:1px solid rgba(140,170,255,0.22);color:#e8eefc;backdrop-filter:blur(6px)}
.btn.pay.ghost:hover{background:rgba(255,255,255,0.10)}
/* focus ring and active state */
.btn.pay:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(111,220,255,.28),0 10px 24px rgba(90,200,255,.25)}
.btn.pay[aria-pressed="true"]{transform:translateY(-1px)}
/* mining cta under pay methods */
.mine-cta{margin:10px 0 0 0;display:flex;flex-direction:column;gap:8px;align-items:center}
.mine-cta .mine-note{color:#9fb3e6;font-size:12px;opacity:.95}
.mine-cta #mining-btn{padding:10px 16px;border-radius:12px;display:inline-flex;flex-direction:column;align-items:center;gap:6px;background:linear-gradient(135deg,#6ad1ff,#8df7e8);color:#06122e;border:0;box-shadow:0 10px 24px rgba(90,200,255,.25);transition:transform .2s ease, box-shadow .2s ease}
.mine-cta #mining-btn:hover{transform:translateY(-1px);box-shadow:0 14px 32px rgba(90,200,255,.32)}
.mine-cta #mining-btn .btn-pick{height:18px;width:auto;filter:drop-shadow(0 6px 12px rgba(0,0,0,.35));animation:pickDrift 1.6s ease-in-out infinite alternate;transform-origin:70% 20%}
@keyframes pickDrift{0%{transform:translate(-8px,-8px) rotate(-8deg)}100%{transform:translate(8px,8px) rotate(8deg)}}

/* ===== Independent Pools Overlay ===== */
#alt-pools{position:fixed;top:0;left:0;right:0;bottom:0;z-index:100;display:none;overflow:auto;background:radial-gradient(1000px 700px at 70% 20%, rgba(36,105,255,.12), rgba(0,0,0,0) 60%), radial-gradient(900px 600px at 25% 70%, rgba(39,210,165,.10), rgba(0,0,0,0) 60%), rgba(5,9,20,.98);backdrop-filter:saturate(120%) blur(2px)}
#alt-pools.show{display:block}
#alt-pools .alt-wrap{width:min(1000px,88vw);margin:40px auto 34px auto;padding-bottom:46px;transform:scale(.94);transform-origin:top center}
#alt-pools .alt-topbar{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;margin-bottom:14px;position:sticky;top:0;padding:12px 0;background:linear-gradient(180deg, rgba(5,9,20,1) 70%, rgba(5,9,20,0) 100%);z-index:2}
#alt-pools .alt-back{border:1px solid rgba(129,159,255,.25);background:rgba(255,255,255,.06);color:#e8eefc;padding:10px 14px;border-radius:12px;cursor:pointer}
#alt-pools .alt-back:hover{background:rgba(255,255,255,.10)}
#alt-pools .alt-title{margin:0;font-size:22px;letter-spacing:.2px;color:#e7efff}
#alt-pools .alt-kpis{display:flex;gap:10px;justify-content:flex-end}
#alt-pools .alt-kpi{border:1px solid rgba(129,159,255,.22);background:rgba(12,24,60,.35);border-radius:12px;padding:8px 12px}
#alt-pools .alt-kpi .k{display:block;color:#9fb3e6;font-size:12px}
#alt-pools .alt-kpi .v{display:block;color:#cfe3ff;font-weight:800}
#alt-pools .alt-controls{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;margin:8px 0 16px 0}
#alt-pools .alt-search{width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(129,159,255,.22);background:rgba(255,255,255,.06);color:#e8eefc}
#alt-pools .alt-filters{display:flex;gap:8px;flex-wrap:wrap}
#alt-pools .alt-chip{padding:8px 12px;border-radius:999px;border:1px solid rgba(129,159,255,.22);background:rgba(255,255,255,.06);color:#cfe3ff;cursor:pointer}
#alt-pools .alt-chip.active{background:linear-gradient(135deg,#6ad1ff,#8df7e8);color:#06122e;border:0}
#alt-pools .alt-sort-label{color:#9fb3e6;font-weight:700;letter-spacing:.2px}
#alt-pools .alt-sort{margin-left:6px;padding:8px 10px;border-radius:10px;border:1px solid rgba(129,159,255,.22);background:rgba(255,255,255,.06);color:#e8eefc}
#alt-pools .alt-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:12px}
#alt-pools .alt-card{position:relative;border:1px solid rgba(129,159,255,.25);background:linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02));backdrop-filter:blur(10px);border-radius:16px;padding:12px;transition:transform .2s ease, box-shadow .2s ease;overflow:hidden}
#alt-pools .alt-card:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(0,0,0,.38)}
#alt-pools .alt-card::before{content:"";position:absolute;inset:-40%;background:radial-gradient(500px 300px at 80% -10%, rgba(111,220,255,.12), rgba(0,0,0,0));opacity:.8;pointer-events:none}
#alt-pools .alt-card-bg{position:absolute;inset:0;background:radial-gradient(600px 300px at 90% -10%, rgba(111,220,255,.12), rgba(0,0,0,0)), linear-gradient(120deg, rgba(255,255,255,.08), rgba(255,255,255,0) 30%);mask-image:radial-gradient(120% 100% at 0 0, #000 40%, transparent 70%);pointer-events:none}
#alt-pools .alt-token-bg{position:absolute;right:-8px;top:-8px;width:100px;height:100px;object-fit:contain;opacity:.12;filter:grayscale(20%) saturate(70%);pointer-events:none}
#alt-pools .alt-card-head{position:relative;display:flex;align-items:center;gap:10px;margin-bottom:8px;z-index:1}
#alt-pools .alt-token{width:18px;height:18px;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.35)}
#alt-pools .alt-name{font-weight:800;letter-spacing:.2px;font-size:14px}
#alt-pools .alt-badge{margin-left:auto;border:1px solid rgba(129,159,255,.28);background:rgba(20,36,80,.45);color:#b9c8ff;border-radius:999px;padding:5px 7px;font-size:11px}
#alt-pools .alt-spark-wrap{position:relative;height:40px;margin:-2px 0 6px 0;z-index:1}
#alt-pools .alt-spark{width:100%;height:100%;opacity:.85;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3))}
#alt-pools .alt-metrics{position:relative;display:grid;grid-template-columns:repeat(3, 1fr);gap:6px;color:#bbcaf3;z-index:1}
#alt-pools .alt-metrics .m{display:flex;flex-direction:column;gap:2px;border:1px solid rgba(255,255,255,.10);border-radius:10px;padding:6px 7px;background:rgba(255,255,255,.06)}
#alt-pools .alt-metrics .k{color:#9fb3e6;font-size:11px}
#alt-pools .alt-metrics .v{color:#cfe3ff;font-weight:800;font-size:13px}
#alt-pools .alt-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
#alt-pools .alt-tags .tag{font-size:11px;color:#b9c8ff;border:1px solid rgba(129,159,255,.25);background:rgba(20,36,80,.4);border-radius:999px;padding:4px 8px}
#alt-pools .alt-actions{position:relative;display:flex;gap:8px;margin-top:8px;z-index:1}
#alt-pools .alt-actions .btn.small{padding:8px 12px;border-radius:10px;font-size:12px}
#alt-pools .alt-actions .pay-icon{width:14px;height:14px;border-radius:50%;margin-right:6px;vertical-align:-2px;box-shadow:0 2px 6px rgba(0,0,0,.35)}

@media (max-width: 1100px){
  #alt-pools .alt-grid{grid-template-columns:1fr}
  #alt-pools .alt-topbar{grid-template-columns:auto 1fr;grid-auto-flow:row}
  #alt-pools .alt-kpis{justify-content:flex-start;flex-wrap:wrap}
  #alt-pools .alt-controls{grid-template-columns:1fr}
}

/* Ensure left side navigation is always above overlays */
.side-nav.left{z-index:1001 !important}
/* Ensure right side dots are also above overlays */
.side-nav.right{z-index:1002 !important}

/* ===== Independent About Overlay (sci‑fi glassmorphism) ===== */
/* ===== Technical Overlay ===== */
/* ===== Contact Overlay ===== */
/* ===== Whitepaper Overlay ===== */
#alt-whitepaper{position:fixed;inset:0;z-index:100;display:none;overflow:auto;background:radial-gradient(1000px 700px at 70% 20%, rgba(36,105,255,.12), rgba(0,0,0,0) 60%), radial-gradient(900px 600px at 25% 70%, rgba(39,210,165,.10), rgba(0,0,0,0) 60%), rgba(5,9,20,.98);backdrop-filter:saturate(120%) blur(2px)}
#alt-whitepaper.show{display:block}
#alt-whitepaper .altw-wrap{width:min(1000px,88vw);margin:40px auto;padding-bottom:40px}
#alt-whitepaper .altw-topbar{display:flex;align-items:center;gap:12px;position:sticky;top:0;padding:12px 0;background:linear-gradient(180deg, rgba(5,9,20,1) 70%, rgba(5,9,20,0) 100%);z-index:2}
#alt-whitepaper .altw-back{border:1px solid rgba(129,159,255,.25);background:rgba(255,255,255,.06);color:#e8eefc;padding:10px 14px;border-radius:12px;cursor:pointer}
#alt-whitepaper .altw-title{margin:0;font-size:22px;color:#e7efff}
#alt-whitepaper .altw-grid{display:grid;grid-template-columns:1fr;gap:12px}
#alt-whitepaper .wp-card{border:1px solid rgba(129,159,255,.22);background:linear-gradient(160deg, rgba(106,209,255,.08), rgba(141,247,232,.04));border-radius:12px;padding:12px}
#alt-whitepaper .wp-card h4{margin:8px 0 6px 0;color:#cfe3ff}
#alt-whitepaper .wp-card ul, #alt-whitepaper .wp-card ol{margin:0 0 6px 18px;color:#bbcaf3}
#alt-whitepaper .wp-card h3{margin:0 0 6px 0;color:#cfe3ff}
#alt-whitepaper .wp-card p{margin:0;color:#bbcaf3}
#alt-whitepaper .wp-timeline{margin:8px 0 10px 0;border:1px solid rgba(129,159,255,.22);background:linear-gradient(160deg, rgba(106,209,255,.08), rgba(141,247,232,.04));border-radius:12px;padding:10px}
#alt-whitepaper .wp-timeline .tl-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
#alt-whitepaper .wp-timeline .tl-card{position:relative;border:1px solid rgba(129,159,255,.22);background:rgba(255,255,255,.06);border-radius:10px;padding:8px;box-shadow:0 8px 22px rgba(0,0,0,.28)}
#alt-whitepaper .wp-timeline .tl-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
#alt-whitepaper .wp-timeline .tl-badge{display:inline-block;padding:2px 6px;border-radius:999px;background:linear-gradient(135deg,#6ad1ff,#8df7e8);color:#06122e;font-weight:800;letter-spacing:.02em}
#alt-whitepaper .wp-timeline .tl-time{color:#9fb3e6;font-size:12px}
#alt-whitepaper .wp-timeline .tl-title{color:#cfe3ff;font-weight:700}
#alt-whitepaper .wp-timeline .tl-progress{height:6px;border-radius:6px;margin-top:6px;background:linear-gradient(90deg, rgba(111,220,255,.25), rgba(141,247,232,.18))}
#alt-whitepaper .wp-timeline .tl-progress::before{content:"";display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#6ad1ff,#8df7e8);box-shadow:0 0 12px rgba(111,220,255,.45)}
#alt-whitepaper .wp-timeline .tl-progress.p0::before{width:28%}
#alt-whitepaper .wp-timeline .tl-progress.p1::before{width:18%}
#alt-whitepaper .wp-timeline .tl-progress.p2::before{width:12%}
#alt-whitepaper .wp-timeline .tl-progress.p3::before{width:6%}
#alt-whitepaper .wp-timeline .tl-progress.p4::before{width:2%}
@media (max-width: 1100px){#alt-whitepaper .wp-timeline .tl-cards{grid-template-columns:1fr 1fr}}
#alt-contact{position:fixed;inset:0;z-index:100;display:none;overflow:auto;background:radial-gradient(1000px 700px at 70% 20%, rgba(36,105,255,.12), rgba(0,0,0,0) 60%), radial-gradient(900px 600px at 25% 70%, rgba(39,210,165,.10), rgba(0,0,0,0) 60%), rgba(5,9,20,.98);backdrop-filter:saturate(120%) blur(2px)}
#alt-contact.show{display:block}
#alt-contact .altc-wrap{width:min(900px,86vw);margin:40px auto;padding-bottom:40px}
#alt-contact .altc-topbar{display:flex;align-items:center;gap:12px;position:sticky;top:0;padding:12px 0;background:linear-gradient(180deg, rgba(5,9,20,1) 70%, rgba(5,9,20,0) 100%);z-index:2}
#alt-contact .altc-back{border:1px solid rgba(129,159,255,.25);background:rgba(255,255,255,.06);color:#e8eefc;padding:10px 14px;border-radius:12px;cursor:pointer}
#alt-contact .altc-title{margin:0;font-size:22px;color:#e7efff}
#alt-contact .altc-hero{text-align:center;margin:12px 0 16px 0;display:flex;flex-direction:column;align-items:center}
#alt-contact .center-logo.big{height:56px;width:auto;filter:drop-shadow(0 8px 16px rgba(0,0,0,.35));margin:0 auto 10px auto;display:block;position:static;left:auto;top:auto;transform:none;z-index:2}
#alt-contact .altc-ticker{position:relative;z-index:1;width:min(880px,92%);margin:6px auto 12px auto;border:1px solid rgba(129,159,255,.25);background:rgba(12,24,60,.35);border-radius:14px;overflow:hidden;box-shadow:0 14px 34px rgba(0,0,0,.35)}
#alt-contact .altc-ticker::before,#alt-contact .altc-ticker::after{content:"";position:absolute;top:0;bottom:0;width:40px;pointer-events:none;z-index:3}
#alt-contact .altc-ticker::before{left:0;background:linear-gradient(90deg, rgba(5,9,20,1), rgba(5,9,20,0))}
#alt-contact .altc-ticker::after{right:0;background:linear-gradient(270deg, rgba(5,9,20,1), rgba(5,9,20,0))}
#alt-contact .altc-ticker .ticker{overflow:hidden}
#alt-contact .altc-ticker .track{display:flex;gap:12px;padding:10px 14px;white-space:nowrap;animation:altcMarquee 22s linear infinite;perspective:700px}
#alt-contact .altc-ticker .it{display:inline-flex;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;background:linear-gradient(160deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02));border:1px solid rgba(140,170,255,0.22);backdrop-filter:blur(6px);font-weight:700;color:#dfe7ff;box-shadow:0 6px 16px rgba(0,0,0,.25);transition:transform .18s ease, box-shadow .18s ease;transform:translateZ(0);will-change:transform}
#alt-contact .altc-ticker .it:hover{transform:translateY(-2px) rotateX(4deg) translateZ(8px);box-shadow:0 14px 28px rgba(0,0,0,.34)}
#alt-contact .altc-ticker .it img{width:20px;height:20px;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.35)}
@keyframes altcMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)} }
#alt-contact .altc-hero .intro{color:#bbcaf3}
#alt-contact .orbital{position:relative;width:220px;height:220px;margin:0 auto 10px}
#alt-contact .center-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:48px;height:48px;filter:drop-shadow(0 6px 12px rgba(0,0,0,.35))}
#alt-contact .orbit{position:absolute;inset:0;border-radius:50%;}
#alt-contact .orbit.outer{animation:spin 14s linear infinite}
#alt-contact .orbit.inner{inset:20% 20%;animation:spinRev 10s linear infinite}
#alt-contact .orbit .tok{position:absolute;width:24px;height:24px;border-radius:50%;box-shadow:0 2px 8px rgba(0,0,0,.35);transform:translate(-50%,-50%);left:50%;top:50%}
#alt-contact .orbit .tok{--n:10;--i:0}
#alt-contact .orbit .tok:nth-child(1){transform:rotate(calc(360deg*(0/var(--n)))) translate(90px) rotate(calc(-360deg*(0/var(--n))))}
#alt-contact .orbit .tok:nth-child(2){transform:rotate(calc(360deg*(1/var(--n)))) translate(90px) rotate(calc(-360deg*(1/var(--n))))}
#alt-contact .orbit .tok:nth-child(3){transform:rotate(calc(360deg*(2/var(--n)))) translate(90px) rotate(calc(-360deg*(2/var(--n))))}
#alt-contact .orbit .tok:nth-child(4){transform:rotate(calc(360deg*(3/var(--n)))) translate(90px) rotate(calc(-360deg*(3/var(--n))))}
#alt-contact .orbit .tok:nth-child(5){transform:rotate(calc(360deg*(4/var(--n)))) translate(90px) rotate(calc(-360deg*(4/var(--n))))}
#alt-contact .orbit .tok:nth-child(6){transform:rotate(calc(360deg*(5/var(--n)))) translate(90px) rotate(calc(-360deg*(5/var(--n))))}
#alt-contact .orbit .tok:nth-child(7){transform:rotate(calc(360deg*(6/var(--n)))) translate(90px) rotate(calc(-360deg*(6/var(--n))))}
#alt-contact .orbit .tok:nth-child(8){transform:rotate(calc(360deg*(7/var(--n)))) translate(90px) rotate(calc(-360deg*(7/var(--n))))}
#alt-contact .orbit .tok:nth-child(9){transform:rotate(calc(360deg*(8/var(--n)))) translate(90px) rotate(calc(-360deg*(8/var(--n))))}
#alt-contact .orbit .tok:nth-child(10){transform:rotate(calc(360deg*(9/var(--n)))) translate(90px) rotate(calc(-360deg*(9/var(--n))))}
#alt-contact .altc-links{display:flex;gap:12px;justify-content:center;margin-top:8px}
#alt-contact .btn.social{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;border:1px solid rgba(129,159,255,.22);background:rgba(255,255,255,.06);color:#cfe3ff;text-decoration:none}
#alt-contact .btn.social .ico{display:inline-flex;width:14px;height:14px}
#alt-contact .btn.social.tg{border-color:rgba(110,220,255,.35)}
#alt-contact .btn.social.tw{border-color:rgba(141,247,232,.35)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinRev{to{transform:rotate(-360deg)}}

#alt-contact .altc-benefits{margin:12px 0}
#alt-contact .altc-benefits .bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
#alt-contact .altc-benefits .bcard{border:1px solid rgba(129,159,255,.22);background:linear-gradient(160deg, rgba(106,209,255,.08), rgba(141,247,232,.04));border-radius:12px;padding:10px}
#alt-contact .altc-benefits .bcard h4{margin:0 0 6px 0;color:#cfe3ff;display:flex;align-items:center;gap:6px}
#alt-contact .altc-benefits .bcard .bicon{display:inline-flex;width:16px;height:16px;color:#8df7e8}
#alt-contact .altc-benefits .bcard p{margin:0;color:#bbcaf3}

#alt-contact .altc-mech{margin:12px 0}
#alt-contact .altc-mech h3{margin:0 0 8px 0;color:#e7efff}
#alt-contact .altc-mech .mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
#alt-contact .altc-mech .mcard{border:1px solid rgba(129,159,255,.22);background:linear-gradient(160deg, rgba(106,209,255,.10), rgba(141,247,232,.06));border-radius:12px;padding:10px}
#alt-contact .altc-mech .mcard h4{margin:0 0 6px 0;color:#cfe3ff;display:flex;align-items:center;gap:6px}
#alt-contact .altc-mech .mcard .micon{display:inline-flex;width:16px;height:16px;color:#6ad1ff}
#alt-contact .altc-mech .mcard p{margin:0;color:#bbcaf3}
#alt-technical{position:fixed;inset:0;z-index:100;display:none;overflow:auto;background:radial-gradient(1000px 700px at 70% 20%, rgba(36,105,255,.12), rgba(0,0,0,0) 60%), radial-gradient(900px 600px at 25% 70%, rgba(39,210,165,.10), rgba(0,0,0,0) 60%), rgba(5,9,20,.98);backdrop-filter:saturate(120%) blur(2px)}
#alt-technical.show{display:block}
#alt-technical .altt-wrap{width:min(1000px,88vw);margin:40px auto;padding-bottom:40px}
#alt-technical .altt-topbar{display:flex;align-items:center;gap:12px;position:sticky;top:0;padding:12px 0;background:linear-gradient(180deg, rgba(5,9,20,1) 70%, rgba(5,9,20,0) 100%);z-index:2}
#alt-technical .altt-back{border:1px solid rgba(129,159,255,.25);background:rgba(255,255,255,.06);color:#e8eefc;padding:10px 14px;border-radius:12px;cursor:pointer}
#alt-technical .altt-title{margin:0;font-size:22px;color:#e7efff}
#alt-technical .altt-term{border:1px solid rgba(129,159,255,.22);background:rgba(0,0,0,.55);border-radius:12px;overflow:hidden;margin:10px 0 14px 0;box-shadow:0 12px 30px rgba(0,0,0,.35)}
#alt-technical .altt-term .term-head{display:flex;align-items:center;gap:8px;padding:8px 10px;background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));border-bottom:1px solid rgba(255,255,255,.08)}
#alt-technical .altt-term .term-head .dot{width:10px;height:10px;border-radius:50%}
#alt-technical .altt-term .term-head .dot.r{background:#ff5f57}
#alt-technical .altt-term .term-head .dot.y{background:#ffbd2e}
#alt-technical .altt-term .term-head .dot.g{background:#28c840}
#alt-technical .altt-term .term-head .title{color:#cfe3ff;opacity:.9;font-weight:700}
#alt-technical .altt-term .term-body{max-height:220px;overflow:auto;padding:10px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;color:#a8ffd6}
#alt-technical .altt-term .term-body .ln{white-space:pre-wrap;line-height:1.5}
#alt-technical .altt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
#alt-technical .tcard{position:relative;border:1px solid rgba(129,159,255,.24);background:linear-gradient(160deg, rgba(106,209,255,.10), rgba(141,247,232,.06), rgba(255,255,255,.02));backdrop-filter:blur(10px);border-radius:14px;padding:12px;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.32)}
#alt-technical .tcard h3{margin:0 0 8px 0;color:#cfe3ff}
#alt-technical .tcard p, #alt-technical .tcard li{color:#bbcaf3}
#alt-technical .tcard .code{background:rgba(0,0,0,.35);border:1px solid rgba(129,159,255,.22);border-radius:10px;padding:10px;color:#cfe3ff}
#alt-technical .altt-api{margin:14px 0}
#alt-technical .altt-api .api-meta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:8px}
#alt-technical .altt-api .kv{display:flex;gap:6px;align-items:center;border:1px solid rgba(129,159,255,.22);background:rgba(255,255,255,.06);border-radius:10px;padding:6px 8px}
#alt-technical .altt-api .kv .k{color:#9fb3e6;font-size:12px}
#alt-technical .altt-api .kv .v{color:#cfe3ff;font-weight:700}
#alt-technical .altt-api .api-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
#alt-technical .altt-api .ep{border:1px solid rgba(129,159,255,.22);background:linear-gradient(160deg, rgba(106,209,255,.08), rgba(141,247,232,.04));border-radius:12px;padding:10px}
#alt-technical .altt-api .ep .row{display:flex;align-items:center;gap:8px}
#alt-technical .altt-api .ep .badge{display:inline-block;padding:2px 6px;border-radius:6px;font-weight:800;letter-spacing:.02em}
#alt-technical .altt-api .ep .badge.get{background:#213e2f;color:#8ef7cf;border:1px solid rgba(142,247,207,.45)}
#alt-technical .altt-api .ep .badge.post{background:#33253e;color:#f7b3ff;border:1px solid rgba(247,179,255,.35)}
#alt-technical .altt-api .ep .badge.evt{background:#2a3548;color:#a9c8ff;border:1px solid rgba(169,200,255,.45)}
#alt-technical .altt-api .ep .path{color:#eaf2ff}
#alt-technical .altt-api .ep .desc{color:#bbcaf3;margin:4px 0}
#alt-technical .altt-api .ep .code{background:rgba(0,0,0,.45);border:1px solid rgba(129,159,255,.22);border-radius:10px;padding:10px;color:#cfe3ff}
#alt-technical .altt-api .copy-btn{margin-top:6px;border:1px solid rgba(129,159,255,.22);background:rgba(255,255,255,.06);color:#cfe3ff;padding:6px 8px;border-radius:8px;cursor:pointer}
#alt-technical .altt-sys{margin:14px 0}
#alt-technical .sys{position:relative;height:180px;border:1px solid rgba(129,159,255,.22);border-radius:12px;background:linear-gradient(160deg, rgba(106,209,255,.08), rgba(141,247,232,.04))}
#alt-technical .sys .node{position:absolute;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(129,159,255,.22);color:#cfe3ff;backdrop-filter:blur(8px)}
#alt-technical .sys .gw{left:10%;top:18%}
#alt-technical .sys .idx{right:10%;top:18%}
#alt-technical .sys .ctr{left:18%;bottom:16%}
#alt-technical .sys .brg{right:16%;bottom:16%}
#alt-technical .sys .conn{position:absolute;width:2px;background:linear-gradient(180deg, rgba(106,209,255,.65), rgba(141,247,232,.18));box-shadow:0 0 10px rgba(111,220,255,.4)}
#alt-technical .sys .conn.c1{left:50%;top:24%;height:40%;transform:translateX(-50%)}
#alt-technical .sys .conn.c2{left:26%;top:26%;height:42%}
#alt-technical .sys .conn.c3{right:26%;top:26%;height:42%}
#alt-technical .altt-abi{margin:14px 0}
#alt-technical .abi-wrap{overflow:auto;border:1px solid rgba(129,159,255,.22);border-radius:12px}
#alt-technical .abi{width:100%;border-collapse:collapse}
#alt-technical .abi th, #alt-technical .abi td{padding:10px;border-bottom:1px solid rgba(255,255,255,.08);color:#cfe3ff}
#alt-technical .abi thead{background:rgba(255,255,255,.06)}
#alt-about{position:fixed;top:0;left:0;right:0;bottom:0;z-index:100;display:none;overflow:auto;background:radial-gradient(1000px 700px at 70% 20%, rgba(36,105,255,.12), rgba(0,0,0,0) 60%), radial-gradient(900px 600px at 25% 70%, rgba(39,210,165,.10), rgba(0,0,0,0) 60%), rgba(5,9,20,.98);backdrop-filter:saturate(120%) blur(2px)}
#alt-about.show{display:block}
#alt-about .alta-wrap{width:min(900px,86vw);margin:40px auto 40px auto;padding-bottom:40px}
#alt-about .alta-topbar{display:flex;align-items:center;gap:12px;position:sticky;top:0;padding:12px 0;background:linear-gradient(180deg, rgba(5,9,20,1) 70%, rgba(5,9,20,0) 100%);z-index:2}
#alt-about .alta-back{border:1px solid rgba(129,159,255,.25);background:rgba(255,255,255,.06);color:#e8eefc;padding:10px 14px;border-radius:12px;cursor:pointer}
#alt-about .alta-back:hover{background:rgba(255,255,255,.10)}
#alt-about .alta-title{margin:0;font-size:24px;color:#e7efff;letter-spacing:.2px}
#alt-about .alta-hero{text-align:center;margin:10px 0 14px 0}
#alt-about .alta-badge-row{display:flex;gap:8px;justify-content:center;margin-bottom:8px}
#alt-about .alta-badge{font-size:11px;color:#b9c8ff;border:1px solid rgba(129,159,255,.25);background:rgba(20,36,80,.4);border-radius:999px;padding:4px 8px}
#alt-about .alta-logo-row{display:flex;gap:10px;align-items:center;justify-content:center}
#alt-about .alta-logo{height:46px;width:auto;filter:drop-shadow(0 6px 12px rgba(0,0,0,.35))}
#alt-about .alta-name{font-weight:800;letter-spacing:.2px;background:linear-gradient(90deg,#8bb8ff,#6ad1ff,#94f7e6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
#alt-about .alta-tag{color:#9fb3e6;margin:8px 0 0 0}
#alt-about .alta-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}
#alt-about .alta-kpis .kpi{border:1px solid rgba(129,159,255,.26);background:linear-gradient(160deg, rgba(106,209,255,.14), rgba(141,247,232,.08), rgba(255,255,255,.04));backdrop-filter:blur(8px);border-radius:12px;padding:10px;text-align:center;box-shadow:0 10px 24px rgba(0,0,0,.28)}
#alt-about .alta-kpis .k{display:block;color:#9fb3e6;font-size:12px}
#alt-about .alta-kpis .v{display:block;color:#cfe3ff;font-weight:800;font-size:18px}
#alt-about .alta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
#alt-about .acard{position:relative;border:1px solid rgba(129,159,255,.24);background:linear-gradient(160deg, rgba(106,209,255,.10), rgba(141,247,232,.06), rgba(255,255,255,.02));backdrop-filter:blur(10px);border-radius:14px;padding:12px;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.32)}
#alt-about .acard::before{content:"";position:absolute;inset:-20% -10%;background:radial-gradient(340px 160px at 90% -10%, rgba(111,220,255,.16), rgba(0,0,0,0));pointer-events:none}
#alt-about .acard::after{content:"";position:absolute;right:-6px;top:-6px;width:96px;height:96px;background:url('logo.png') center/contain no-repeat;opacity:.12;filter:grayscale(20%) saturate(70%);pointer-events:none}
#alt-about .acard h3{margin:0 0 8px 0;color:#cfe3ff}
#alt-about .acard h3 .hico{display:inline-flex;width:16px;height:16px;vertical-align:-2px;margin-right:6px;color:#8df7e8}
#alt-about .acard .tags{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
#alt-about .acard .tag{font-size:11px;color:#06122e;background:linear-gradient(135deg,#6ad1ff,#8df7e8);border-radius:999px;padding:4px 8px;box-shadow:0 6px 16px rgba(90,200,255,.25)}
#alt-about .acard.security{position:relative;overflow:hidden}
#alt-about .acard.security::before{content:"";position:absolute;inset:-30%;background:conic-gradient(from 120deg at 70% 20%, rgba(111,220,255,.18), rgba(141,247,232,.0) 40%, rgba(111,220,255,.18));filter:blur(18px);opacity:.6;pointer-events:none}
#alt-about .acard.security::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));mask-image:radial-gradient(120% 100% at 0 0, #000 40%, transparent 70%);pointer-events:none}
#alt-about .acard.security .wm{position:absolute;right:-6px;top:-6px;width:96px;height:96px;background:url('logo.png') center/contain no-repeat;opacity:.14;filter:grayscale(20%) saturate(70%);pointer-events:none}
#alt-about .acard .sec-badges{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
#alt-about .acard .sec-badges .sb{font-size:11px;color:#06122e;background:linear-gradient(135deg,#6ad1ff,#8df7e8);border-radius:999px;padding:4px 8px;box-shadow:0 6px 16px rgba(90,200,255,.25)}
#alt-about .acard p, #alt-about .abullets li{color:#bbcaf3}
#alt-about .abullets{margin:0;padding-left:16px;list-style:disc}
#alt-about .abullets li{display:list-item;color:#bbcaf3}
#alt-about .alta-timeline{margin:16px 0}
#alt-about .alta-timeline h3{margin:0 0 8px 0}
#alt-about .t3d{position:relative;display:grid;grid-template-columns:1fr;gap:18px;padding:10px 0}
#alt-about .t3d .rail{position:absolute;left:50%;top:0;bottom:0;width:3px;transform:translateX(-50%);background:linear-gradient(180deg, rgba(106,209,255,.65), rgba(141,247,232,.18));filter:drop-shadow(0 0 10px rgba(111,220,255,.4))}
#alt-about .q-card{position:relative;display:grid;gap:6px;width:min(440px,86%);border:1px solid rgba(129,159,255,.22);background:linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02));backdrop-filter:blur(10px);border-radius:14px;padding:10px 12px;color:#bbcaf3;box-shadow:0 12px 30px rgba(0,0,0,.35);transition:transform .25s ease, box-shadow .25s ease}
#alt-about .q-card .head{font-weight:800;color:#cfe3ff}
#alt-about .q-card .head .tico{display:inline-flex;width:16px;height:16px;vertical-align:-2px;margin-right:6px;color:#8df7e8;filter:drop-shadow(0 0 8px rgba(111,220,255,.45))}
#alt-about .q-card .body{opacity:.95}
#alt-about .q-card .pin{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,#6ad1ff,#8df7e8);box-shadow:0 0 12px rgba(111,220,255,.8);transform:translateY(-50%)}
#alt-about .q-card:hover{transform:translateZ(0) translateY(-2px) scale(1.01);box-shadow:0 16px 38px rgba(0,0,0,.4)}
#alt-about .q1{justify-self:start;margin-left:4%}
#alt-about .q1 .pin{right:-7px}
#alt-about .q2{justify-self:end;margin-right:4%}
#alt-about .q2 .pin{left:-7px}
#alt-about .q3{justify-self:start;margin-left:6%}
#alt-about .q3 .pin{right:-7px}
#alt-about .q4{justify-self:end;margin-right:6%}
#alt-about .q4 .pin{left:-7px}
#alt-about .q-card::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg, rgba(111,220,255,.12), rgba(141,247,232,.0) 40%, rgba(111,220,255,.12));opacity:.0;transition:opacity .4s ease}
#alt-about .q-card:hover::after{opacity:.25}
#alt-about .alta-news{margin:14px 0}
#alt-about .alta-news h3{margin:0 0 8px 0}
#alt-about .alta-news .row{display:flex;gap:8px}
#alt-about .alta-news input{flex:1;padding:10px 12px;border-radius:10px;border:1px solid rgba(129,159,255,.22);background:rgba(255,255,255,.06);color:#cfe3ff}
#alt-about .alta-news button{padding:10px 14px;border-radius:10px;border:0;background:linear-gradient(135deg,#6ad1ff,#8df7e8);color:#06122e;font-weight:800}

/* Success Modal Toast */
.alta-toast{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all .3s ease}
.alta-toast.show{opacity:1;visibility:visible}
.alta-toast-content{background:linear-gradient(135deg,rgba(22,36,86,.95),rgba(10,20,54,.9));border:1px solid rgba(129,159,255,.3);border-radius:20px;padding:32px;max-width:400px;width:90vw;text-align:center;box-shadow:0 20px 40px rgba(0,0,0,.4);transform:scale(0.8) translateY(20px);transition:all .4s cubic-bezier(0.175, 0.885, 0.32, 1.275)}
.alta-toast.show .alta-toast-content{transform:scale(1) translateY(0)}
.alta-toast-icon{width:64px;height:64px;margin:0 auto 20px;background:linear-gradient(135deg,#8ee7cf,#6fdcff);border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;animation:successPulse 2s infinite}
.alta-toast-icon::after{content:'✓';font-size:32px;font-weight:bold;color:#06122e}
.alta-toast-title{font-size:20px;font-weight:700;color:#8ee7cf;margin:0 0 12px 0;letter-spacing:.5px}
.alta-toast-message{font-size:16px;color:#cfe3ff;margin:0 0 24px 0;line-height:1.4}
.alta-toast-close{background:linear-gradient(135deg,#6ad1ff,#8df7e8);border:0;color:#06122e;padding:12px 24px;border-radius:10px;font-weight:700;cursor:pointer;transition:all .2s ease;font-size:14px}
.alta-toast-close:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(106,209,255,.4)}
@keyframes successPulse{0%,100%{box-shadow:0 0 0 0 rgba(142,231,207,.7)}50%{box-shadow:0 0 0 20px rgba(142,231,207,0)}}

/* Transfer Modal */
.transfer-modal{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10001;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all .3s ease}
.transfer-modal.show{opacity:1;visibility:visible}
.transfer-modal-content{background:linear-gradient(135deg,rgba(22,36,86,.95),rgba(10,20,54,.9));border:1px solid rgba(129,159,255,.3);border-radius:20px;padding:32px;max-width:500px;width:90vw;text-align:center;box-shadow:0 20px 40px rgba(0,0,0,.4);transform:scale(0.8) translateY(20px);transition:all .4s cubic-bezier(0.175, 0.885, 0.32, 1.275)}
.transfer-modal.show .transfer-modal-content{transform:scale(1) translateY(0)}
.transfer-modal-header{margin-bottom:24px}
.transfer-modal-title{font-size:20px;font-weight:700;color:#6ad1ff;margin:0 0 8px 0}
.transfer-modal-subtitle{font-size:14px;color:#9fb3e6;margin:0}
.transfer-form{margin:24px 0}
.transfer-input-group{margin-bottom:20px;text-align:left}
.transfer-input-label{display:block;font-size:14px;color:#cfe3ff;margin-bottom:8px;font-weight:600}
.transfer-input{width:100%;padding:12px 16px;border-radius:12px;border:1px solid rgba(129,159,255,.3);background:rgba(255,255,255,.08);color:#cfe3ff;font-size:14px;transition:all .2s ease;box-sizing:border-box}
.transfer-input:focus{outline:none;border-color:#6ad1ff;box-shadow:0 0 0 2px rgba(106,209,255,.2)}
.transfer-input::placeholder{color:#9fb3e6}
.transfer-actions{display:flex;gap:12px;margin-top:24px}
.transfer-btn{flex:1;padding:12px 20px;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;transition:all .2s ease;border:1px solid transparent}
.transfer-btn.cancel{background:rgba(255,255,255,.1);color:#cfe3ff;border-color:rgba(255,255,255,.2)}
.transfer-btn.cancel:hover{background:rgba(255,255,255,.15)}
.transfer-btn.confirm{background:linear-gradient(135deg,#6ad1ff,#8df7e8);color:#06122e}
.transfer-btn.confirm:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(106,209,255,.4)}

/* Transfer Confirmation Modal */
.transfer-confirm-info{background:rgba(255,255,255,.05);border:1px solid rgba(129,159,255,.2);border-radius:12px;padding:16px;margin:20px 0;text-align:left}
.transfer-detail{display:flex;justify-content:space-between;align-items:center;margin:8px 0}
.transfer-detail-label{color:#9fb3e6;font-size:14px}
.transfer-detail-value{color:#cfe3ff;font-weight:600;font-size:14px;word-break:break-all}
.transfer-warning{background:rgba(255,165,0,.1);border:1px solid rgba(255,165,0,.3);border-radius:8px;padding:12px;margin:16px 0;color:#ffa500;font-size:13px;text-align:center}

/* Transfer Sending Animation */
.transfer-sending{position:relative;overflow:hidden}
.transfer-sending .transfer-modal-content{pointer-events:none}
.transfer-progress{position:absolute;top:0;left:0;right:0;height:4px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden}
.transfer-progress-bar{height:100%;background:linear-gradient(90deg,#6ad1ff,#8df7e8);width:0%;transition:width 3s ease-out;border-radius:2px}
.transfer-sending-text{text-align:center;margin:20px 0;color:#6ad1ff;font-weight:600}
.transfer-sending-icon{width:60px;height:60px;margin:20px auto;border:3px solid #6ad1ff;border-radius:50%;border-top-color:transparent;animation:transferSpin 1s linear infinite}
@keyframes transferSpin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

/* Unstake Animation */
.unstaking-animation{position:relative;overflow:hidden}
.unstaking-animation::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,165,0,.3),transparent);animation:unstakeProgress 2s ease-in-out}
@keyframes unstakeProgress{0%{left:-100%}100%{left:100%}}
.token-earning-card.removing{animation:cardFadeOut 0.5s ease-out forwards}
@keyframes cardFadeOut{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(0.8)}}

/* Mining Modal */
#mining-modal{position:fixed;inset:0;z-index:200;display:none;overflow:auto;background:radial-gradient(1000px 700px at 70% 20%, rgba(36,105,255,.15), rgba(0,0,0,0) 60%), radial-gradient(900px 600px at 25% 70%, rgba(39,210,165,.12), rgba(0,0,0,0) 60%), rgba(5,9,20,.95);backdrop-filter:saturate(120%) blur(4px)}
#mining-modal.show{display:flex;align-items:center;justify-content:center}
.mining-modal-content{width:min(720px,92vw);background:linear-gradient(160deg, rgba(22,36,86,.8), rgba(10,20,54,.7));border:1px solid rgba(129,159,255,.28);border-radius:18px;padding:28px;backdrop-filter:blur(12px);box-shadow:0 20px 40px rgba(0,0,0,.4);transform:scale(0.9);opacity:0;transition:transform .3s ease, opacity .3s ease}
#mining-modal.show .mining-modal-content{transform:scale(1);opacity:1}
.mining-modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.mining-modal-title{margin:0;font-size:20px;color:#e7efff;letter-spacing:.2px;display:flex;align-items:center;gap:10px}
.mining-modal-title .title-icon{width:24px;height:24px;filter:drop-shadow(0 0 8px rgba(111,220,255,.45))}
.mining-modal-close{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#cfe3ff;width:32px;height:32px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}
.mining-modal-close:hover{background:rgba(255,255,255,.12);transform:scale(1.05)}
.mining-targets{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:20px}
.mining-target-card{background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03));border:1px solid rgba(129,159,255,.22);border-radius:14px;padding:16px;cursor:pointer;transition:all .2s ease;position:relative;overflow:hidden}
.mining-target-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.35);border-color:rgba(129,159,255,.35)}
.mining-target-card.selected{border-color:rgba(111,220,255,.6);background:linear-gradient(135deg, rgba(111,220,255,.15), rgba(141,247,232,.08));box-shadow:0 0 0 2px rgba(111,220,255,.25)}
.mining-target-card::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg, rgba(111,220,255,.0) 0%, rgba(111,220,255,.15) 40%, rgba(139,184,255,.15) 60%, rgba(111,220,255,.0) 100%);transform:translateX(-120%);opacity:0;transition:transform .4s ease, opacity .4s ease;pointer-events:none}
.mining-target-card:hover::before{transform:translateX(0);opacity:1}
.mining-target-header{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.mining-target-icon{width:32px;height:32px;border-radius:50%;box-shadow:0 4px 12px rgba(0,0,0,.35)}
.mining-target-name{font-size:16px;font-weight:700;color:#eaf2ff}
.mining-target-network{font-size:12px;color:#9fb3e6;background:rgba(129,159,255,.12);padding:3px 8px;border-radius:999px;margin-left:auto}
.mining-target-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.mining-target-stat{text-align:center;padding:8px 6px;background:rgba(255,255,255,.06);border-radius:8px}
.mining-target-stat-label{display:block;font-size:10px;color:#9fb3e6;margin-bottom:2px}
.mining-target-stat-value{display:block;font-size:14px;font-weight:700;color:#cfe3ff}
.mining-target-apy{color:#8ee7cf}
.mining-target-description{font-size:12px;color:#bbcaf3;line-height:1.4}
.mining-modal-actions{display:flex;gap:12px;margin-top:20px}
.mining-modal-btn{flex:1;padding:12px 18px;border-radius:12px;font-weight:700;letter-spacing:.2px;cursor:pointer;transition:all .2s ease;border:1px solid transparent;display:flex;align-items:center;justify-content:center;gap:8px}
.mining-modal-btn.primary{background:linear-gradient(135deg,#6ad1ff,#8df7e8);color:#06122e;box-shadow:0 10px 24px rgba(90,200,255,.25)}
.mining-modal-btn.primary:hover{transform:translateY(-1px);box-shadow:0 14px 32px rgba(90,200,255,.32)}
.mining-modal-btn.secondary{background:rgba(255,255,255,.06);border:1px solid rgba(129,159,255,.22);color:#cfe3ff}
.mining-modal-btn.secondary:hover{background:rgba(255,255,255,.10)}
.mining-modal-btn:disabled{opacity:.5;cursor:not-allowed;transform:none !important}
.mining-btn-icon{width:16px;height:16px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.35))}
.mining-modal-note{font-size:12px;color:#9fb3e6;text-align:center;margin-top:12px;opacity:.9}
.mining-payment-info{text-align:center;margin-bottom:16px;padding:8px 12px;background:rgba(111,220,255,.08);border:1px solid rgba(111,220,255,.15);border-radius:8px}
.payment-label{font-size:14px;color:#cfe3ff;font-weight:600}
.mining-target-card.disabled{opacity:.6;cursor:not-allowed;background:linear-gradient(135deg, rgba(255,255,255,.03), rgba(255,255,255,.01))}
.mining-target-card.disabled:hover{transform:none;box-shadow:none;border-color:rgba(129,159,255,.22)}
.coming-soon-badge{position:absolute;top:8px;right:8px;background:linear-gradient(135deg,#ff9a56,#ff6b9d);color:#fff;font-size:10px;font-weight:700;padding:3px 8px;border-radius:999px;box-shadow:0 2px 6px rgba(255,107,157,.3);z-index:1}

/* Mining Modal Responsive */
@media (max-width: 768px) {
  .mining-modal-content{width:min(480px,92vw);padding:20px}
  .mining-targets{grid-template-columns:1fr;gap:12px}
  .mining-modal-title{font-size:18px}
}

@media (max-width: 520px) {
  .mining-modal-content{width:94vw;padding:16px}
  .mining-target-stats{grid-template-columns:repeat(2,1fr)}
  .mining-target-stat:last-child{grid-column:1/-1}
}

/* Mining Input Step */
.mining-input-step{display:none;margin-top:20px}
.mining-input-step.show{display:block}
.mining-input-form{background:rgba(255,255,255,.04);border:1px solid rgba(129,159,255,.18);border-radius:12px;padding:20px;margin:16px 0}
.mining-input-label{display:block;font-size:14px;color:#cfe3ff;font-weight:600;margin-bottom:8px}
.mining-amount-input{width:100%;padding:12px 16px;border:1px solid rgba(129,159,255,.25);border-radius:10px;background:rgba(255,255,255,.06);color:#e8eefc;font-size:16px;font-weight:600;transition:border-color .2s ease}
.mining-amount-input:focus{outline:none;border-color:rgba(111,220,255,.6);box-shadow:0 0 0 3px rgba(111,220,255,.15)}
.mining-amount-input::placeholder{color:#9fb3e6;opacity:.7}
.mining-input-info{display:flex;justify-content:space-between;margin-top:8px;font-size:12px}
.mining-available{color:#9fb3e6}
.mining-max-btn{color:#6ad1ff;cursor:pointer;font-weight:600}
.mining-max-btn:hover{text-decoration:underline}

/* Mining Confirmation Animation */
.mining-confirmation{display:none;text-align:center;padding:20px 0}
.mining-confirmation.show{display:block}
.confirmation-spinner{width:48px;height:48px;border:3px solid rgba(111,220,255,.2);border-top:3px solid #6ad1ff;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 16px}
.confirmation-text{font-size:16px;color:#cfe3ff;margin-bottom:8px}
.confirmation-details{font-size:12px;color:#9fb3e6}

/* Mining Success Animation */
.mining-success{display:none;text-align:center;padding:20px 0}
.mining-success.show{display:block}
.success-icon{width:64px;height:64px;margin:0 auto 16px;background:linear-gradient(135deg,#6ad1ff,#8df7e8);border-radius:50%;display:flex;align-items:center;justify-content:center;animation:successPulse .6s ease-out}
.success-icon::after{content:"✓";font-size:32px;color:#06122e;font-weight:bold}
.success-text{font-size:18px;color:#8ee7cf;font-weight:700;margin-bottom:8px}
.success-details{font-size:14px;color:#cfe3ff;margin-bottom:20px}
.success-actions{display:flex;justify-content:center;gap:12px}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes successPulse{0%{transform:scale(0.8);opacity:0}50%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}

/* Balance Update Animation */
.balance-update{animation:balanceFlash 0.8s ease-out}
@keyframes balanceFlash{0%{background:rgba(111,220,255,.3);transform:scale(1.05)}100%{background:transparent;transform:scale(1)}}

/* Mining Management Page */
#mining-management{position:fixed;inset:0;z-index:200;display:none;overflow:auto;background:radial-gradient(1000px 700px at 70% 20%, rgba(36,105,255,.15), rgba(0,0,0,0) 60%), radial-gradient(900px 600px at 25% 70%, rgba(39,210,165,.12), rgba(0,0,0,0) 60%), rgba(5,9,20,.95);backdrop-filter:saturate(120%) blur(4px);padding:20px}
#mining-management.show{display:flex;align-items:flex-start;justify-content:center}
.management-content{width:min(1400px,95vw);max-height:95vh;overflow-y:auto;background:linear-gradient(160deg, rgba(22,36,86,.8), rgba(10,20,54,.7));border:1px solid rgba(129,159,255,.28);border-radius:18px;padding:32px;backdrop-filter:blur(12px);box-shadow:0 20px 40px rgba(0,0,0,.4);transform:scale(0.9);opacity:0;transition:transform .3s ease, opacity .3s ease;margin-top:20px}
#mining-management.show .management-content{transform:scale(1);opacity:1}
.management-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.management-title{margin:0;font-size:24px;color:#e7efff;letter-spacing:.2px;display:flex;align-items:center;gap:12px}
.management-title .title-icon{width:28px;height:28px;filter:drop-shadow(0 0 8px rgba(111,220,255,.45))}
.management-close{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#cfe3ff;width:36px;height:36px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}
.management-close:hover{background:rgba(255,255,255,.12);transform:scale(1.05)}
.management-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:32px}
.management-stat-card{background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03));border:1px solid rgba(129,159,255,.22);border-radius:12px;padding:16px;text-align:center}
.management-stat-label{display:block;font-size:12px;color:#9fb3e6;margin-bottom:4px}
.management-stat-value{display:block;font-size:20px;font-weight:700;color:#cfe3ff}
.management-stat-change{display:block;font-size:12px;margin-top:4px}
.management-stat-change.positive{color:#8ee7cf}
.management-stat-change.negative{color:#ff8585}
.mining-positions{margin-bottom:24px}
.mining-positions h3{margin:0 0 16px 0;font-size:18px;color:#e7efff}
.position-card{background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));border:1px solid rgba(129,159,255,.18);border-radius:14px;padding:20px;margin-bottom:12px;transition:all .2s ease}
.position-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.25)}
.position-header{display:flex;align-items:center;justify-content:between;margin-bottom:12px}
.position-token{display:flex;align-items:center;gap:10px}
.position-token-icon{width:24px;height:24px;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.position-token-name{font-size:16px;font-weight:700;color:#eaf2ff}
.position-status{margin-left:auto;padding:4px 8px;border-radius:6px;font-size:11px;font-weight:600}
.position-status.active{background:rgba(142,231,207,.15);color:#8ee7cf;border:1px solid rgba(142,231,207,.3)}
.position-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}
.position-metric{text-align:center}
.position-metric-label{display:block;font-size:10px;color:#9fb3e6;margin-bottom:2px}
.position-metric-value{display:block;font-size:14px;font-weight:600;color:#cfe3ff}
.position-actions{display:flex;gap:12px;flex-wrap:wrap}
.position-btn{padding:8px 12px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease;border:1px solid transparent}
.position-btn.withdraw{background:rgba(255,133,133,.15);color:#ff8585;border-color:rgba(255,133,133,.3)}
.position-btn.withdraw:hover{background:rgba(255,133,133,.25)}
.position-btn.compound{background:rgba(142,231,207,.15);color:#8ee7cf;border-color:rgba(142,231,207,.3)}
.position-btn.compound:hover{background:rgba(142,231,207,.25)}
.position-btn.unstake{background:rgba(255,165,0,.15);color:#ffa500;border-color:rgba(255,165,0,.3)}
.position-btn.unstake:hover{background:rgba(255,165,0,.25)}
.position-btn.claim{background:rgba(111,220,255,.15);color:#6fdcff;border-color:rgba(111,220,255,.3)}
.position-btn.claim:hover{background:rgba(111,220,255,.25)}

/* Enhanced Position Cards */
.position-card-expanded{padding:24px;margin-bottom:16px}
.position-earnings{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0;padding:16px;background:rgba(255,255,255,.03);border-radius:10px;border:1px solid rgba(129,159,255,.15)}
.earnings-item{text-align:center}
.earnings-label{display:block;font-size:11px;color:#9fb3e6;margin-bottom:4px}
.earnings-value{display:block;font-size:16px;font-weight:700;color:#8ee7cf}
.earnings-change{display:block;font-size:10px;margin-top:2px}
.earnings-change.positive{color:#8ee7cf}
.earnings-change.negative{color:#ff8585}

/* Progress Bars */
.progress-container{margin:12px 0}
.progress-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.progress-label-text{font-size:12px;color:#9fb3e6}
.progress-label-value{font-size:12px;color:#cfe3ff;font-weight:600}
.progress-bar{width:100%;height:8px;background:rgba(255,255,255,.1);border-radius:4px;overflow:hidden;position:relative}
.progress-bar-fill{height:100%;background:linear-gradient(90deg,#8ee7cf,#6fdcff);border-radius:4px;transition:width .6s ease;position:relative}
.progress-bar-fill::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:progressShine 2s infinite}
@keyframes progressShine{0%,100%{transform:translateX(-100%)}50%{transform:translateX(100%)}}
.progress-bar.lock-period .progress-bar-fill{background:linear-gradient(90deg,#ffa500,#ff8c00)}
.progress-bar.apy-progress .progress-bar-fill{background:linear-gradient(90deg,#6ad1ff,#8df7e8)}

/* Mining History Section */
.mining-history{margin:24px 0}
.mining-history h3{margin:0 0 16px 0;font-size:18px;color:#e7efff}
.history-filters{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.history-filter{padding:6px 12px;border-radius:8px;border:1px solid rgba(129,159,255,.22);background:rgba(255,255,255,.06);color:#cfe3ff;cursor:pointer;font-size:12px;transition:all .2s ease}
.history-filter.active{background:linear-gradient(135deg,#6ad1ff,#8df7e8);color:#06122e;border:0}
.history-filter:hover{background:rgba(255,255,255,.10)}
.history-table{width:100%;border-collapse:collapse;background:rgba(255,255,255,.03);border-radius:12px;overflow:hidden}
.history-table th, .history-table td{padding:12px 16px;text-align:left;border-bottom:1px solid rgba(255,255,255,.08)}
.history-table th{background:rgba(255,255,255,.06);color:#9fb3e6;font-weight:600;font-size:12px}
.history-table td{color:#cfe3ff;font-size:13px}
.history-table .amount{font-variant-numeric:tabular-nums;font-weight:600}
.history-table .positive{color:#8ee7cf}
.history-table .negative{color:#ff8585}
.history-table .status-active{color:#8ee7cf}
.history-table .status-pending{color:#ffa500}
.history-table .status-completed{color:#9fb3e6}

/* Rewards Section */
.rewards-section{margin:24px 0;padding:20px;background:linear-gradient(135deg, rgba(142,231,207,.08), rgba(111,220,255,.06));border:1px solid rgba(142,231,207,.2);border-radius:16px}
.rewards-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.rewards-title{margin:0;font-size:18px;color:#8ee7cf;display:flex;align-items:center;gap:8px}
.rewards-icon{width:20px;height:20px;filter:drop-shadow(0 0 6px rgba(142,231,207,.6))}
.rewards-total{text-align:right}
.rewards-total-label{display:block;font-size:12px;color:#9fb3e6;margin-bottom:2px}
.rewards-total-value{display:block;font-size:24px;font-weight:800;color:#8ee7cf}
.rewards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:20px}
.reward-item{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);border-radius:10px;padding:12px}
.reward-token{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.reward-token-icon{width:16px;height:16px;border-radius:50%}
.reward-token-name{font-weight:600;color:#eaf2ff}
.reward-amount{font-size:18px;font-weight:700;color:#8ee7cf;margin-bottom:4px}
.reward-usd{font-size:12px;color:#9fb3e6}
.claim-all-btn{padding:12px 24px;background:linear-gradient(135deg,#8ee7cf,#6fdcff);color:#06122e;border:0;border-radius:10px;font-weight:700;cursor:pointer;transition:all .2s ease}
.claim-all-btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(142,231,207,.3)}

/* Token Earnings Detail Section */
.token-earnings-section{margin:24px 0;padding:20px;background:linear-gradient(135deg, rgba(111,220,255,.06), rgba(142,231,207,.04));border:1px solid rgba(111,220,255,.15);border-radius:16px}
.token-earnings-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.token-earnings-title{margin:0;font-size:18px;color:#6fdcff;display:flex;align-items:center;gap:8px}
.token-earnings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.token-earning-card{background:rgba(255,255,255,.04);border:1px solid rgba(129,159,255,.15);border-radius:12px;padding:16px;transition:all .2s ease}
.token-earning-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.15)}
.token-earning-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.token-earning-info{display:flex;align-items:center;gap:10px}
.token-earning-icon{width:24px;height:24px;border-radius:50%}
.token-earning-name{font-size:16px;font-weight:700;color:#eaf2ff}
.token-earning-symbol{font-size:12px;color:#9fb3e6;margin-left:4px}
.token-earning-apy{padding:4px 8px;background:rgba(142,231,207,.15);color:#8ee7cf;border-radius:6px;font-size:11px;font-weight:600}
.token-earning-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.token-earning-metric{text-align:center;padding:8px;background:rgba(255,255,255,.03);border-radius:8px}
.token-earning-metric-label{display:block;font-size:10px;color:#9fb3e6;margin-bottom:4px}
.token-earning-metric-value{display:block;font-size:14px;font-weight:600;color:#cfe3ff}
.token-earning-actions{display:flex;gap:8px}
.token-earning-btn{flex:1;padding:8px 12px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease;border:1px solid transparent;text-align:center}
.token-earning-btn.claim{background:rgba(111,220,255,.15);color:#6fdcff;border-color:rgba(111,220,255,.3)}
.token-earning-btn.claim:hover{background:rgba(111,220,255,.25)}
.token-earning-btn.compound{background:rgba(142,231,207,.15);color:#8ee7cf;border-color:rgba(142,231,207,.3)}
.token-earning-btn.compound:hover{background:rgba(142,231,207,.25)}
.token-earning-btn:disabled{opacity:0.5;cursor:not-allowed}
.token-earning-btn.transfer{background:rgba(106,209,255,.15);color:#6ad1ff;border-color:rgba(106,209,255,.3)}
.token-earning-btn.transfer:hover{background:rgba(106,209,255,.25)}
.token-earning-btn.unstake-expired{background:rgba(255,165,0,.15);color:#ffa500;border-color:rgba(255,165,0,.3)}
.token-earning-btn.unstake-expired:hover{background:rgba(255,165,0,.25)}
.token-earning-card.expired{border-color:rgba(255,133,133,.3);background:rgba(255,133,133,.02)}
.token-earning-card.expired .token-earning-apy.expired-apy{background:rgba(255,133,133,.15);color:#ff8585}
.token-earning-actions{flex-wrap:wrap;gap:8px}
.token-earning-btn{min-width:120px}

/* Mining Settings */
.mining-settings{margin:24px 0}
.mining-settings h3{margin:0 0 16px 0;font-size:18px;color:#e7efff}
.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.setting-card{background:rgba(255,255,255,.04);border:1px solid rgba(129,159,255,.18);border-radius:12px;padding:16px}
.setting-title{font-size:14px;font-weight:600;color:#cfe3ff;margin-bottom:8px}
.setting-description{font-size:12px;color:#9fb3e6;margin-bottom:12px}
.setting-control{display:flex;align-items:center;justify-content:space-between}
.setting-toggle{width:44px;height:24px;background:rgba(255,255,255,.2);border-radius:12px;position:relative;cursor:pointer;transition:background .2s ease}
.setting-toggle.active{background:linear-gradient(135deg,#6ad1ff,#8df7e8)}
.setting-toggle-thumb{width:20px;height:20px;background:#fff;border-radius:50%;position:absolute;top:2px;left:2px;transition:transform .2s ease;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.setting-toggle.active .setting-toggle-thumb{transform:translateX(20px)}

/* Performance Charts Placeholder */
.performance-section{margin:24px 0}
.performance-section h3{margin:0 0 16px 0;font-size:18px;color:#e7efff}
.chart-placeholder{min-height:200px;background:linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.02));border:1px solid rgba(129,159,255,.15);border-radius:12px;padding:16px;color:#9fb3e6;font-size:14px}
.chart-container{width:100%;height:100%}
.chart-stats{display:flex;justify-content:space-around;margin-bottom:16px;padding:12px;background:rgba(255,255,255,.03);border-radius:8px}
.chart-stat{text-align:center}
.chart-stat-label{display:block;font-size:11px;color:#9fb3e6;margin-bottom:4px}
.chart-stat-value{display:block;font-size:16px;font-weight:700;color:#cfe3ff}
.chart-stat-value.positive{color:#8ee7cf}
.chart-stat-value.negative{color:#ff8585}
.performance-chart{width:100%;height:160px;border-radius:8px}
.chart-controls{display:flex;gap:8px;margin-bottom:16px}
.chart-period{padding:6px 12px;border-radius:6px;border:1px solid rgba(129,159,255,.22);background:rgba(255,255,255,.06);color:#cfe3ff;cursor:pointer;font-size:12px}
.chart-period.active{background:linear-gradient(135deg,#6ad1ff,#8df7e8);color:#06122e;border:0}

/* Mining Management Responsive Design */
@media (max-width: 1200px) {
    .management-content{width:min(1200px,95vw)}
    .management-stats{grid-template-columns:repeat(3,1fr)}
    .rewards-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
    .settings-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
}

@media (max-width: 768px) {
    #mining-management{padding:10px}
    .management-content{width:95vw;padding:20px;margin-top:10px}
    .management-stats{grid-template-columns:1fr;gap:12px}
    .position-metrics{grid-template-columns:repeat(2,1fr)}
    .position-actions{justify-content:center}
    .rewards-grid{grid-template-columns:1fr}
    .settings-grid{grid-template-columns:1fr}
    .history-filters{justify-content:center}
    .chart-controls{justify-content:center}
    .history-table{font-size:12px}
    .history-table th, .history-table td{padding:8px 12px}
}

@media (max-width: 480px) {
    .management-content{padding:16px}
    .management-title{font-size:20px}
    .position-card-expanded{padding:16px}
    .position-earnings{grid-template-columns:1fr;gap:8px}
    .position-metrics{grid-template-columns:1fr;gap:8px}
    .position-actions{flex-direction:column;gap:8px}
    .position-btn{text-align:center}
}
/* Center badges and roadmap */
.badges{justify-content:center;align-items:center}
.roadmap-chip{text-align:center}

.badges {
  display: flex;
  gap: 10px;
  margin-top: 16px
}

.badges span {
  border: 1px solid rgba(129, 159, 255, .25);
  border-radius: 999px;
  padding: 8px 10px;
  color: #b9c8ff;
  background: rgba(20, 36, 80, .5);
  font-size: 12px
}

.roadmap-chip {
  margin-top: 16px;
  color: #8fb4ff;
  opacity: .9;
  font-weight: 600
}

@media (max-width: 1024px) {
  .content {
    padding: 0 90px
  }

  .content h1 {
    font-size: 44px
  }

  .pools {
    grid-template-columns: 1fr
  }

  .side-nav {
    width: 60px
  }
}

@media (max-width: 720px) {
  .content {
    padding: 0 70px
  }

  .content h1 {
    font-size: 36px
  }

  .side-nav {
    display: none
  }

  body {
    overflow: auto
  }
}

/* Ultra small mobile layout */
@media (max-width: 520px){
  .headline{font-size:24px}
  .headline-logo{height:28px;margin-bottom:8px}
  .connect-wallet{gap:8px}
  .stake-ticker{width:92%}
  .live-prices{grid-template-columns:1fr;gap:8px}
  .price-card{padding:10px 12px}
  .pools{grid-template-columns:1fr;gap:10px}
  .pool-card{padding:12px}
  .rig{height:96px}
  .ore{height:8px}
  .side-nav.right{display:none !important}
  .side-nav.left{display:none !important}
  .content{padding:0 52px}
  .pay-row{gap:8px}
  .btn.pay{padding:10px 14px}
  .mine-cta #mining-btn{padding:10px 14px}
  /* whitepaper: narrow cards */
  #alt-whitepaper .altw-wrap{width:92vw}
  #alt-whitepaper .wp-table-wrap{overflow:auto}
  /* pools overlay */
  #alt-pools .alt-wrap{width:92vw}
  #alt-pools .alt-grid{grid-template-columns:1fr}
  #alt-pools .alt-controls{grid-template-columns:1fr}
  /* about overlay */
  #alt-about .alta-wrap{width:92vw}
  #alt-about .alta-kpis{grid-template-columns:1fr 1fr}
  #alt-about .alta-grid{grid-template-columns:1fr}
  /* technical overlay */
  #alt-technical .altt-wrap{width:92vw}
  #alt-technical .altt-grid{grid-template-columns:1fr}
  #alt-technical .altt-api .api-grid{grid-template-columns:1fr}
  /* contact overlay */
  #alt-contact .altc-wrap{width:92vw}
  #alt-contact .altc-benefits .bgrid{grid-template-columns:1fr}
  #alt-contact .altc-mech .mgrid{grid-template-columns:1fr}
}

/* Strongest overrides placed at end to ensure priority on very small screens */
@media (max-width: 520px){
  html, body{max-width:100vw;overflow-x:hidden}
  #hero, #overview{max-width:100vw;overflow-x:hidden}
  .content{padding:16px 16px 0 16px;max-width:100vw}
  .brand{position:static;left:auto;right:auto;top:auto;display:flex;gap:8px;align-items:center;justify-content:center;margin-top:8px}
  .brand-logo{height:20px}
  .brand .tag{font-size:10px}
  #particles{width:100vw}
  /* hide connect wallet button on mobile */
  .connect-wallet #connect-btn{display:none !important}
  .headline{font-size:22px;line-height:1.2}
  .live-prices{grid-template-columns:1fr}
  .pools{grid-template-columns:1fr}
  #alt-whitepaper .altw-wrap,
  #alt-pools .alt-wrap,
  #alt-about .alta-wrap,
  #alt-technical .altt-wrap,
  #alt-contact .altc-wrap{width:94vw}
  .wp-table-wrap{overflow:auto}

  /* Overview-specific downscaling */
  #overview .live-prices{gap:8px}
  #overview .price-card strong{font-size:16px}
  #overview .pools{gap:8px}
  #overview .pool-card{padding:10px;border-radius:12px;transform:scale(.96);transform-origin:top center}
  #overview .pools .token-bg{width:72px;height:72px;opacity:.18}
  #overview .pool-meta{margin-bottom:6px}
  #overview .pool-name{font-size:14px}
  #overview .pool-apy{font-size:12px}
  #overview .rig{height:78px}
  #overview .ore{height:6px}
  #overview .ore .ore-fill{left:2px;top:2px;bottom:2px;width:calc(var(--progress,.4)*100% - 4px)}
  #overview .chip{font-size:11px;padding:6px 8px}

  /* Prevent brand/content overlap on mobile */
  .hero, #hero{display:block;min-height:100vh}
  #hero{place-items:initial}
  .brand{margin-bottom:8px}
}

/* Base */
* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #e7ebf0;
  background: #0a0f1a;
  overflow: hidden;
}

/* Canvas background */
#bg-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  background: radial-gradient(1200px 800px at 70% 30%, rgba(36, 105, 255, 0.20), rgba(0, 0, 0, 0) 60%),
    radial-gradient(900px 600px at 25% 65%, rgba(39, 210, 165, 0.18), rgba(0, 0, 0, 0) 60%),
    #050914;
}

/* Side navs */
.side-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 3;
}

.side-nav.left {
  left: 24px;
}

.side-nav.right {
  right: 20px;
}

.side-nav .nav-item {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #dfe7f3;
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: all .2s ease;
  backdrop-filter: blur(6px);
  font-weight: 600;
  /* rich motion setup */
  transform: perspective(600px) rotateX(var(--tiltX, 0deg)) rotateY(var(--tiltY, 0deg)) scale(var(--pressScale, 1));
  transform-origin: center;
  will-change: transform, box-shadow;
  position: relative;
  overflow: hidden;
  outline: none;
  box-shadow: inset 0 0 0 0 rgba(111, 220, 255, 0);
}

.side-nav .nav-item:hover {
  transform: translateX(4px) scale(1.02);
  background: rgba(255, 255, 255, 0.10);
}

.side-nav.left .nav-item:hover {
  transform: translateX(6px) scale(1.03);
}

.side-nav.right .nav-item:hover {
  transform: translateX(-4px);
}

.side-nav .nav-item.active {
  background: linear-gradient(135deg, rgba(61, 133, 255, .35), rgba(36, 210, 165, .35));
  border-color: rgba(255, 255, 255, 0.18);
}

/* Focus-visible rich animation: glow + sweep */
.side-nav .nav-item:focus-visible {
  box-shadow: inset 4px 0 0 0 rgba(111, 220, 255, .95), 0 0 18px rgba(111, 220, 255, .25);
  animation: glowBreath 1.2s ease-in-out infinite, focusPulse .9s ease-in-out 1;
}

.side-nav .nav-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(111, 220, 255, .0) 0%, rgba(111, 220, 255, .25) 40%, rgba(139, 184, 255, .25) 60%, rgba(111, 220, 255, .0) 100%);
  transform: translateX(-120%);
  opacity: 0;
  transition: transform .45s ease, opacity .45s ease;
  pointer-events: none;
}

.side-nav .nav-item:hover::before,
.side-nav .nav-item:focus-visible::before,
.side-nav .nav-item.active::before {
  transform: translateX(0);
  opacity: 1;
}

.side-nav .nav-item.active::before {
  animation: sweepMove 1.4s linear infinite;
}

/* Ripple effect controlled by JS via --ripple-x/--ripple-y */
.side-nav .nav-item::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  left: var(--ripple-x, 50%);
  top: var(--ripple-y, 50%);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(circle, rgba(111, 220, 255, .55) 0%, rgba(111, 220, 255, 0) 70%);
  opacity: 0.9;
  pointer-events: none;
}

.side-nav .nav-item.rippling::after {
  animation: ripple .7s ease-out forwards;
}

/* small sparks (created by JS) */
.nav-spark {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #7fe7ff 0%, rgba(127, 231, 255, 0.0) 70%);
  filter: drop-shadow(0 0 8px rgba(111, 220, 255, .9));
  pointer-events: none;
  animation: sparkFly .6s ease-out forwards;
}

/* Right dots focus ring */
.side-nav .dot {
  position: relative;
}

.side-nav .dot:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(111, 220, 255, .35);
}

.side-nav .dot.focus-pulse {
  animation: ringPulse .9s ease-in-out 1;
}

.side-nav .dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(111, 220, 255, .4);
  opacity: 0;
  pointer-events: none;
}

.side-nav .dot:focus-visible::after,
.side-nav .dot.active::after {
  animation: dotRipple 1s ease-out 1;
  opacity: 1;
}

@keyframes ripple {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: .95;
  }

  100% {
    transform: translate(-50%, -50%) scale(22);
    opacity: 0;
  }
}

@keyframes sparkFly {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }

  100% {
    transform: translate(var(--dx, 20px), var(--dy, -20px)) scale(.2);
    opacity: 0;
  }
}

@keyframes focusPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(61, 133, 255, .6), 0 8px 20px rgba(61, 133, 255, .35);
  }

  100% {
    box-shadow: 0 0 0 12px rgba(61, 133, 255, 0), 0 8px 20px rgba(61, 133, 255, .0);
  }
}

@keyframes ringPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(111, 220, 255, .45);
  }

  100% {
    box-shadow: 0 0 0 12px rgba(111, 220, 255, 0);
  }
}

@keyframes dotRipple {
  0% {
    box-shadow: 0 0 0 0 rgba(111, 220, 255, .4);
  }

  100% {
    box-shadow: 0 0 0 14px rgba(111, 220, 255, 0);
  }
}

@keyframes sweepMove {
  from {
    transform: translateX(-120%);
  }

  to {
    transform: translateX(120%);
  }
}

@keyframes glowBreath {
  0% {
    box-shadow: inset 4px 0 0 0 rgba(111, 220, 255, .95), 0 0 10px rgba(111, 220, 255, .15);
  }

  50% {
    box-shadow: inset 4px 0 0 0 rgba(139, 184, 255, .85), 0 0 22px rgba(111, 220, 255, .25);
  }

  100% {
    box-shadow: inset 4px 0 0 0 rgba(111, 220, 255, .95), 0 0 10px rgba(111, 220, 255, .15);
  }
}

/* Hero */
#hero {
  position: relative;
  z-index: 2;
  height: 100vh;
  width: 100vw;
  display: grid;
  place-items: center;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.2fr;
  grid-template-rows: auto;
  gap: 28px;
  width: min(1200px, 92vw);
  align-items: center;
}

.brand .logo-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand h1 {
  margin: 0;
  font-size: 56px;
  letter-spacing: -0.02em;
}

.logo-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2fdac8, #3a7bff);
  box-shadow: 0 0 24px rgba(61, 133, 255, .8);
}

.tagline {
  margin: 10px 0 18px;
  color: #b9c3d4;
  font-size: 16px;
}

.cta-row {
  display: flex;
  gap: 12px;
}

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 12px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  color: #e7ebf0;
  font-weight: 700;
  letter-spacing: .01em;
}

.cta.primary {
  background: linear-gradient(135deg, #3d85ff, #25d2a5);
  box-shadow: 0 10px 30px rgba(53, 145, 255, 0.35);
}

.cta.ghost {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  font-weight: 600;
}

.cta.small {
  padding: 10px 14px;
  font-size: 14px;
}

.hero-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 14px;
}

.fact {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px;
}

.fact .k {
  display: block;
  color: #93a4be;
  font-size: 12px;
}

.fact .v {
  display: block;
  font-weight: 700;
}

/* Mining stage */
.mining-stage {
  position: relative;
  width: 100%;
  height: 360px;
  display: grid;
  place-items: center;
}

.pickaxe {
  width: 160px;
  height: auto;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .5));
  animation: swing var(--swing-duration, 3.8s) ease-in-out infinite;
  transform-origin: 80% 10%;
}

.ore {
  position: absolute;
  bottom: 40px;
  width: 220px;
  height: 60px;
  background: linear-gradient(180deg, rgba(86, 97, 126, .9), rgba(35, 42, 66, .9));
  border-radius: 16px;
  box-shadow: inset 0 6px 18px rgba(0, 0, 0, .5), 0 10px 30px rgba(0, 0, 0, .4);
}

.sparks {
  position: absolute;
  bottom: 80px;
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(50, 210, 180, .8));
}

/* spark span inline styles are set in JS */

@keyframes swing {
  0% {
    transform: rotate(var(--swing-min, -6deg)) translateY(0);
  }

  50% {
    transform: rotate(var(--swing-max, 6deg)) translateY(6px);
  }

  100% {
    transform: rotate(var(--swing-min, -6deg)) translateY(0);
  }
}

/* Panels */
.panels {
  display: grid;
  gap: 14px;
}

.panel {
  display: none;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 16px;
  max-height: 420px;
  overflow: auto;
  backdrop-filter: blur(6px);
}

.panel.show {
  display: block;
}

.panel h2 {
  margin: 0 0 8px;
}

.panel p {
  margin: 0 0 8px;
  color: #b9c3d4;
}

.bullets {
  margin: 10px 0 0;
  padding-left: 18px;
  color: #c7d2e6;
}

/* Pools */
.pools {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.pool-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px;
  padding: 14px;
  transition: transform .2s ease, box-shadow .2s ease;
}

.pool-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
}

/* coming soon card spans full row */
.coming-card{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px dashed rgba(129,159,255,.35);background:rgba(12,24,60,.35);border-radius:16px;padding:14px 16px}
.coming-text{font-weight:700;color:#cfe3ff;letter-spacing:.2px}
.coming-row{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border-radius:999px;color:#b9c8ff;border:1px solid rgba(129,159,255,.25);background:rgba(20,36,80,.4);font-size:12px}
.chip-icon{width:14px;height:14px;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.35)}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.ticker {
  font-weight: 800;
  letter-spacing: .08em;
  color: #eaf2ff;
}

.price {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #6fe7c7;
}

.price.up {
  color: #6fe7c7;
}

.price.down {
  color: #ff8585;
}

.card-body {
  display: grid;
  gap: 8px;
  color: #b9c3d4;
}

.metric {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-cta {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.pool-card.pulse {
  box-shadow: 0 0 0 0 rgba(61, 133, 255, .6);
  animation: pulseGlow .9s ease-in-out 1;
}

@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(61, 133, 255, .6);
  }

  100% {
    box-shadow: 0 0 0 16px rgba(61, 133, 255, 0);
  }
}

/* Price Ticker */
.price-ticker {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1100px, 90vw);
  overflow: hidden;
  z-index: 3;
}

.ticker-track {
  display: flex;
  gap: 16px;
  white-space: nowrap;
  animation: ticker 30s linear infinite;
}

.ticker-item {
  display: inline-flex;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  font-weight: 700;
}

.ticker-item .sym {
  color: #eaf2ff;
}

.ticker-item .val.up {
  color: #6fe7c7;
}

.ticker-item .val.down {
  color: #ff8585;
}

@keyframes ticker {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* Responsive */
@media (max-width: 1100px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .pools {
    grid-template-columns: 1fr;
  }

  .side-nav.left {
    left: 10px;
  }

  .side-nav.right {
    right: 10px;
  }
}

/* --- Mining cards refined overrides --- */
.pools .pool-card{position:relative;border-radius:18px;background:rgba(8,14,34,.55);backdrop-filter:blur(8px);border:1px solid rgba(129,159,255,.22);overflow:hidden;transition:transform .2s ease, box-shadow .2s ease}
.pools .pool-card:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.35)}
.pools .pool-card .token-bg{position:absolute;right:12px;top:12px;width:110px;height:110px;object-fit:contain;opacity:.22;z-index:0}
.pools .pool-meta{position:relative;z-index:2;margin-bottom:10px}
.pools .rig{position:relative;z-index:2;height:120px;display:flex;align-items:center;justify-content:center}
.pools .ore{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);width:76%;height:18px;border-radius:14px;background:rgba(8,12,26,.6);box-shadow:inset 0 2px 6px rgba(0,0,0,.45),0 10px 30px rgba(0,0,0,.25)}
.pools .ore .ore-fill{position:absolute;left:3px;top:3px;bottom:3px;width:calc(var(--progress,.4)*100% - 6px);border-radius:12px;background:linear-gradient(90deg,rgba(255,255,255,.12),rgba(255,255,255,.28))}
.pools .ore-btc .ore-fill{background:linear-gradient(90deg,rgba(255,200,80,.35),rgba(255,140,0,.55))}
.pools .ore-eth .ore-fill{background:linear-gradient(90deg,rgba(98,126,234,.35),rgba(45,92,255,.58))}
.pools .ore-pepe .ore-fill{background:linear-gradient(90deg,rgba(124,228,84,.35),rgba(46,204,113,.58))}
.pools .ore .ore-pick{position:absolute;bottom:50%;left:calc(var(--progress,.4)*100%);transform:translate(-50%,30%) rotate(-8deg);width:22px;height:auto;opacity:.95;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35));pointer-events:none}