*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Root & Background ── */
.r {
  font-family: 'Inter', sans-serif;
  background: #f4f7ff url('/bg.png') no-repeat top right;
  color: #0f172a;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

.bg-arc {
  position: absolute;
  top: -60px;
  right: -60px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  border: 80px solid rgba(180, 205, 255, 0.25);
  pointer-events: none;
  z-index: 0;
}

.bg-arc2 {
  position: absolute;
  top: 60px;
  right: 60px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  border: 50px solid rgba(180, 205, 255, 0.15);
  pointer-events: none;
  z-index: 0;
}

/* ── Navigation ── */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  position: relative;
  z-index: 10;
  /*background: rgba(244, 247, 255, 0.85);*/
  /*backdrop-filter: blur(8px);*/
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 16px;
  color: #0f172a;
}

.logo-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.logo-icon img {
  width: 40px;
  height: 40px;
  display: block;
}

.btn-nav {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
  transition: opacity 0.15s;
}

.btn-nav:hover { opacity: 0.88; }

/* Wallet block (connected state) */
.nav-wallet-block {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 13px;
}
.conn-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
}
.conn-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #16a34a;
  animation: pulse 2s infinite;
}
.nav-wallet-name { font-weight: 600; color: #0f172a; }
.nav-wallet-addr {
  font-family: 'Courier New', monospace;
  font-size: 12px; color: #94a3b8;
  cursor: pointer; transition: color 0.15s;
}
.nav-wallet-addr:hover { color: #2563eb; }
.nav-disconnect-btn {
  display: flex; align-items: center; gap: 5px;
  background: none; border: none;
  color: #94a3b8; font-size: 12px; font-weight: 500;
  cursor: pointer; padding: 0;
  transition: color 0.15s; font-family: inherit;
}
.nav-disconnect-btn:hover { color: #dc2626; }

/* ── Hero ── */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 32px 32px 0;
  position: relative;
  z-index: 5;
  min-height: 300px;
}

.badge-pill {
  display: inline-block;
  background: #e8f0ff;
  color: #3b82f6;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 5px 12px;
  border-radius: 99px;
  margin-bottom: 18px;
  border: 1px solid #bfdbfe;
}

.hero-h1 {
  font-size: 56px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #0a0f1e;
  margin-bottom: 16px;
}

.hero-sub {
  font-size: 17px;
  color: #64748b;
  font-weight: 400;
}

.hero-sub b {
  color: #2563eb;
  font-weight: 700;
}

.hero-right {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 280px;
}

/* ── Coins ── */
.coin-wrap {
  position: relative;
  width: 320px;
  height: 260px;
}

.coin-bg-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(147, 197, 253, 0.3) 0%, transparent 65%);
}

.coin-main-svg {
  position: absolute;
  right: 20px;
  top: 10px;
  width: 220px;
  height: 220px;
  animation: floatC 4s ease-in-out infinite;
}

.coin-sm1 {
  position: absolute;
  left: 0;
  top: 40px;
  width: 90px;
  height: 90px;
  animation: floatC2 3.5s ease-in-out infinite;
}

.coin-sm2 {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 65px;
  height: 65px;
  animation: floatC3 5s ease-in-out infinite;
  opacity: 0.9;
}

@keyframes floatC  { 0%,100%{transform:translateY(0);}       50%{transform:translateY(-14px);} }
@keyframes floatC2 { 0%,100%{transform:translateY(0) rotate(-4deg);} 50%{transform:translateY(-9px) rotate(4deg);} }
@keyframes floatC3 { 0%,100%{transform:translateY(0) rotate(3deg);}  50%{transform:translateY(-11px) rotate(-3deg);} }
@keyframes spin    { to{transform:rotate(360deg);} }
@keyframes pulse   { 0%,100%{opacity:1;} 50%{opacity:.35;} }
@keyframes blink   { 0%,100%{opacity:1;} 50%{opacity:.3;} }

/* ── Stats Strip Row — два блока рядом ── */
.stats-strip-row {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  margin: 24px 32px 0;
  position: relative;
  z-index: 5;
}

.stats-strip {
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  background: #fff;
}

.stats-strip--available {
  padding: 28px;
}

.stats-strip--stats {
  padding: 28px 36px;
}

.strip-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 16px;
}

.strip-title {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 20px;
}

.btn-full {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  border: none;
  padding: 14px 0;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  font-family: inherit;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.28);
  transition: opacity 0.15s;
}

.btn-full:hover { opacity: 0.88; }
.btn-full:disabled { opacity: 0.45; cursor: not-allowed; }

.strip-right {
  padding: 28px 36px;
}

.stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 22px;
}

.stats-row--three {
  grid-template-columns: 1fr 1fr 1fr;
}

.stat-block-label {
  font-size: 13px;
  color: #64748b;
  margin-bottom: 4px;
  font-weight: 500;
}

.stat-block-val {
  font-size: 36px;
  font-weight: 800;
  color: #2563eb;
  letter-spacing: -0.02em;
  line-height: 1;
}

.stat-block-val2 {
  font-size: 30px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.stat-icon { font-size: 22px; }

.stat-block--budget {
  border-left: 1px solid #e8edf5;
  padding-left: 16px;
}

.stat-block-val--green {
  color: #16a34a;
}

.stat-block-sub {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
  margin-top: 4px;
}

.prog-label {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 8px;
}

.prog-label span {
  color: #64748b;
  font-weight: 400;
}

.prog-track {
  height: 8px;
  background: #e2e8f0;
  border-radius: 99px;
  overflow: hidden;
}

.prog-fill {
  height: 100%;
  width: 64%;
  background: linear-gradient(90deg, #2563eb, #60a5fa);
  border-radius: 99px;
}

/* ── Bottom Grid ── */
.bottom {
  display: grid;
  grid-template-columns: 1fr 1.6fr 1.8fr;
  gap: 16px;
  margin: 16px 32px 32px;
  position: relative;
  z-index: 5;
}

.bottom--stack {
  grid-template-columns: 1fr;
}

.card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  padding: 24px;
}

.card-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 18px;
}

/* ── How It Works ── */
.steps {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.step-counter {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #eff6ff;
  border: 1.5px solid #bfdbfe;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #2563eb;
  flex-shrink: 0;
}

.step-line {
  width: 2px;
  height: 20px;
  background: linear-gradient(#bfdbfe, #e0f2fe);
  margin-top: 4px;
}

.step-body {
  flex: 1;
  padding-top: 2px;
}

.step-title {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 4px;
}

.step-desc {
  font-size: 12px;
  color: #64748b;
  line-height: 1.5;
}

/* ── Event Details ── */
.ev-period-title {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 10px;
}

.ev-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: #64748b;
  margin-bottom: 5px;
}

.ev-row i { color: #94a3b8; font-size: 14px; }

.ev-divider {
  height: 1px;
  background: #f1f5f9;
  margin: 14px 0;
}

.ev-q {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
}

.ev-list { list-style: none; }

.ev-list li {
  font-size: 11.5px;
  color: #475569;
  padding: 3px 0;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  line-height: 1.45;
}

.ev-list li::before {
  content: '•';
  color: #3b82f6;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── Activations Table ── */
.tbl-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.tbl-header .card-label { margin-bottom: 0; }

.btn-view-all {
  background: none;
  border: none;
  color: #2563eb;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}

.btn-view-all:hover { text-decoration: underline; }

.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.tbl th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #94a3b8;
  padding: 0 6px 8px;
  border-bottom: 1px solid #f1f5f9;
}

.tbl td {
  padding: 10px 6px;
  border-bottom: 1px solid #f8fafc;
  vertical-align: middle;
}

.tbl tbody tr:last-child td { border-bottom: none; }

.tbl tbody tr { transition: background 0.15s ease; }
.tbl tbody tr:hover { background: #f8fafc; }

.tbl-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #16a34a;
}

.tbl-live .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #16a34a;
  animation: pulse 2s infinite;
}

.tbl-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
  font-size: 11px;
  color: #94a3b8;
}

.td-date { color: #94a3b8; font-size: 12px; white-space: nowrap; }
.td-date.hi, .td-wallet.hi { color: #0f172a; font-weight: 600; }
.td-wallet { font-family: 'Courier New', monospace; font-size: 12px; color: #334155; }
.td-status { display: inline-flex; align-items: center; gap: 5px; color: #16a34a; font-weight: 600; font-size: 12px; }

.act-type { display: inline-block; padding: 2px 9px; border-radius: 6px; font-size: 11px; font-weight: 600; }
.act-type.dex     { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.act-type.nft     { background: #f5f0ff; color: #7c3aed; border: 1px solid #e9d5ff; }
.act-type.lp      { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.act-type.bridge  { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.act-type.content { background: #f8fafc; color: #64748b; border: 1px solid #e2e8f0; }

/* ── How It Works enhancements (из index.html) ── */
.card-sub {
  font-size: 12px;
  color: #94a3b8;
  margin: -12px 0 18px;
  line-height: 1.4;
}

.step-num.icon {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  font-size: 13px;
}

.step-tag {
  display: none;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-size: 10.5px;
  font-weight: 600;
  color: #2563eb;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  padding: 2px 8px;
}

/* ── Event Details enhancements ── */
.ev-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.ev-header .card-label { margin-bottom: 0; }

.ev-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #16a34a;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 99px;
  padding: 3px 10px;
}

.ev-status .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #16a34a;
  animation: pulse 2s infinite;
}

.ev-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 16px 0;
}

.ev-info-item {
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 10px;
  padding: 10px 12px;
}

.ev-info-label {
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.ev-info-val {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}

.ev-group-title {
  font-size: 11px;
  font-weight: 700;
  color: #2563eb;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin: 16px 0 8px;
}

/* ── Activations Table enhancements ── */
.tbl-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.badge .rdot {
  width: 6px; height: 6px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
}

/* ── Status row (для strip-left после connect) ── */
.p2-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 20px;
}
.p2-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; transition: background .3s; }
.dot-green  { background: #16a34a; }
.dot-yellow { background: #ca8a04; }
.dot-red    { background: #dc2626; }
.dot-gray   { background: #cbd5e1; }
.p2-status-txt { font-size: 12px; color: #94a3b8; font-weight: 500; }

/* ── Table cell styles (from index.html) ── */
.mono {
  font-family: 'Courier New', Courier, monospace;
  font-size: 12px;
  color: #334155;
}

.voucher-id {
  color: #64748b;
}

.badge {
  display: inline-flex;
  padding: 2px 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid transparent;
}

.b-epic     { background: #f5f0ff; color: #7c3aed; border-color: #e9d5ff; }
.b-rare     { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.b-uncommon { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.b-common   { background: #f8fafc; color: #64748b; border-color: #e2e8f0; }

.b-epic .rdot     { background: #7c3aed; }
.b-rare .rdot     { background: #1d4ed8; }
.b-uncommon .rdot { background: #15803d; }
.b-common .rdot   { background: #94a3b8; }

.tbl-time {
  color: #94a3b8;
  font-size: 11px;
}

.activated {
  color: #16a34a;
  font-weight: 600;
  font-size: 12px;
}

/* ── Pulse & Spin animations ── */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* ── ev-list links ── */
.ev-list a {
  color: #2563eb;
  text-decoration: none;
  font-weight: 500;
}
.ev-list a:hover { text-decoration: underline; }

/* ── Claim Popup ── */
#claim-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 16px;
}

.claim-popup {
  background: #fff;
  border-radius: 24px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 32px 80px rgba(15, 23, 42, 0.2);
  width: 100%;
  max-width: 420px;
  padding: 32px 28px 28px;
  position: relative;
  text-align: center;
  animation: popupIn 0.22s cubic-bezier(0.34, 1.4, 0.64, 1);
}

@keyframes popupIn {
  from { opacity: 0; transform: translateY(16px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* Close button — абсолютно в углу */
.claim-popup-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: #f1f5f9;
  border: none;
  border-radius: 8px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #94a3b8;
  transition: background 0.15s, color 0.15s;
}
.claim-popup-close:hover {
  background: #fee2e2;
  color: #dc2626;
}

/* Icon + check badge */
.claim-popup-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.claim-popup-icon-wrap {
  position: relative;
  width: 72px;
  height: 72px;
}

.claim-popup-icon-wrap img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: block;
  border: 3px solid #e0f2fe;
}

.claim-popup-check {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border: 2.5px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.claim-popup-connected-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 14px;
}

.claim-popup-connected-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16a34a;
  animation: pulse 2s infinite;
  flex-shrink: 0;
}

/* Title block */
.claim-popup-title-block {
  margin-bottom: 20px;
}

.claim-popup-name {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.claim-popup-sub {
  font-size: 13px;
  color: #64748b;
  line-height: 1.55;
}

/* Divider */
.claim-popup-divider {
  height: 1px;
  background: #f1f5f9;
  margin: 0 -28px 20px;
}

/* Status row */
.claim-popup-status {
  justify-content: center;
  margin-bottom: 16px;
  min-height: 18px;
}

/* Button area */
.claim-popup-btn-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.claim-popup-btn {
  width: 100%;
  padding: 16px 0;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
  transition: opacity 0.15s, transform 0.1s, box-shadow 0.15s;
  letter-spacing: -0.01em;
}

.claim-popup-btn:hover:not(:disabled) {
  opacity: 0.92;
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(37, 99, 235, 0.4);
}

.claim-popup-btn:active:not(:disabled) {
  transform: translateY(0);
}

.claim-popup-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

.claim-popup-hint {
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.5;
}

/* ══════════════════════════════════════
   How It Works — wide horizontal redesign
   ══════════════════════════════════════ */

.card--hiw {
  padding: 32px 36px;
}

.hiw-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 32px;
}

.hiw-subtitle {
  font-size: 14px;
  color: #64748b;
  margin-top: 6px;
}

.hiw-steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.hiw-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px 28px;
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 16px;
  position: relative;
}

.hiw-step-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border: 1.5px solid #bfdbfe;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #2563eb;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.hiw-step-icon--2 {
  background: linear-gradient(135deg, #f5f0ff, #ede9fe);
  border-color: #ddd6fe;
  color: #7c3aed;
}

.hiw-step-icon--3 {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  border-color: #bbf7d0;
  color: #16a34a;
}

.hiw-step-num {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #94a3b8;
  margin-bottom: 8px;
}

.hiw-step-title {
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}

.hiw-step-desc {
  font-size: 13px;
  color: #64748b;
  line-height: 1.6;
  flex: 1;
  margin-bottom: 16px;
}

.hiw-step-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: #2563eb;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: 4px 10px;
}

.hiw-step-tag--2 {
  color: #7c3aed;
  background: #f5f0ff;
  border-color: #ddd6fe;
}

.hiw-step-tag--3 {
  color: #16a34a;
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.hiw-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  flex-shrink: 0;
  font-size: 20px;
  color: #cbd5e1;
  padding-top: 52px; /* выравниваем по иконке */
}

/* ══════════════════════════════════════
   Event Details — wide horizontal redesign
   ══════════════════════════════════════ */

.card--ev {
  padding: 32px 36px;
}

.ev-title-main {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
  margin-top: 2px;
}

.ev-body-grid {
  display: flex;
  gap: 0;
  margin-top: 24px;
}

.ev-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ev-col--left  { flex: 0 0 280px; }
.ev-col--mid   { flex: 1; }
.ev-col--right { flex: 0 0 300px; }

.ev-col-divider {
  width: 1px;
  background: #f1f5f9;
  margin: 0 28px;
  flex-shrink: 0;
}

.ev-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #94a3b8;
  margin-bottom: 4px;
}

/* Timeline */
.ev-timeline {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ev-timeline-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.ev-timeline-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #f0f9ff;
  border: 1px solid #e0f2fe;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #0284c7;
  flex-shrink: 0;
}

.ev-timeline-label {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.ev-timeline-val {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
}

.ev-timeline-dur {
  display: inline-block;
  background: #f1f5f9;
  color: #64748b;
  font-size: 11px;
  font-weight: 500;
  border-radius: 6px;
  padding: 1px 7px;
  margin-left: 6px;
}

/* Params */
.ev-params {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ev-param-item {
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 10px;
  padding: 10px 14px;
}

.ev-param-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #94a3b8;
  margin-bottom: 6px;
}

.ev-param-val {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ev-param-val i {
  color: #64748b;
  font-size: 15px;
}

/* Wide list */
.ev-list--wide {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
}

.ev-list--wide li {
  font-size: 13px;
  color: #475569;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
  padding: 0;
}

.ev-list--wide li i {
  color: #2563eb;
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Note */
.ev-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 12px;
  color: #92400e;
  line-height: 1.5;
  margin-top: auto;
}

.ev-note i {
  color: #d97706;
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── Nav Claim Button ── */
.nav-claim-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s;
}
.nav-claim-btn:hover { opacity: 0.88; }

/* ══════════════════════════════════════════════════════
   MOBILE  ≤ 768px
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Убираем фоновые дуги — занимают место */
  .bg-arc, .bg-arc2 { display: none; }

  /* ── Nav ── */
  .nav {
    padding: 12px 16px;
    gap: 8px;
  }

  .logo { font-size: 14px; }
  .logo-icon { width: 32px; height: 32px; }
  .logo-icon img { width: 32px; height: 32px; }

  /* Кнопка Connect Wallet в nav */
  .btn-nav {
    padding: 8px 14px;
    font-size: 13px;
  }

  /* Wallet block — компактно, без имени и адреса */
  .nav-wallet-block {
    padding: 5px 10px;
    gap: 6px;
    flex-wrap: nowrap;
  }
  .nav-wallet-name { display: none; }
  .nav-wallet-addr { display: none; }
  .conn-badge { font-size: 10px; padding: 2px 8px; }

  /* Claim Reward в nav — только иконка на мобиле */
  .nav-claim-btn span,
  .nav-claim-btn { font-size: 12px; padding: 5px 10px; }

  /* ── Hero ── */
  .hero {
    grid-template-columns: 1fr;
    padding: 24px 16px 0;
    min-height: auto;
  }

  .hero-right { display: none; }

  .hero-h1 {
    font-size: 36px;
    margin-bottom: 12px;
  }

  .hero-sub { font-size: 15px; }

  .badge-pill {
    font-size: 10px;
    margin-bottom: 14px;
  }

  /* ── Stats Strip ── */
  .stats-strip-row {
    grid-template-columns: 1fr;
    margin: 16px 16px 0;
    gap: 12px;
  }

  .stats-strip--available { padding: 20px; }
  .stats-strip--stats { padding: 20px; }

  /* Три стата — 1 колонка */
  .stats-row--three {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 16px;
  }

  .stat-block--budget {
    border-left: none;
    border-top: 1px solid #e8edf5;
    padding-left: 0;
    padding-top: 14px;
  }

  .stat-block-val { font-size: 28px; }
  .stat-block-val2 { font-size: 24px; }

  .btn-full { padding: 14px 0; font-size: 15px; }

  /* ── Bottom stack ── */
  .bottom--stack {
    margin: 12px 16px 24px;
    gap: 12px;
  }

  /* ── How It Works ── */
  .card--hiw { padding: 20px; }

  .hiw-steps {
    flex-direction: column;
    gap: 12px;
  }

  .hiw-arrow { display: none; }

  .hiw-step {
    padding: 18px 20px;
  }

  .hiw-step-num { font-size: 10px; }
  .hiw-step-title { font-size: 15px; }
  .hiw-step-desc { font-size: 13px; }

  /* ── Event Details ── */
  .card--ev { padding: 20px; }

  .ev-title-main { font-size: 17px; }

  .ev-body-grid {
    flex-direction: column;
    gap: 0;
  }

  .ev-col-divider {
    width: auto;
    height: 1px;
    margin: 20px 0;
  }

  .ev-col--left,
  .ev-col--mid,
  .ev-col--right { flex: none; width: 100%; }

  .ev-params { flex-direction: column; }

  .ev-param-val { flex-wrap: wrap; gap: 4px; }

  /* ── Activations Table ── */
  .card { padding: 18px; }

  .tbl { font-size: 11px; }
  .tbl th { font-size: 9.5px; padding: 0 4px 6px; }
  .tbl td { padding: 8px 4px; }

  /* Скрываем колонку Activity на маленьких экранах */
  .tbl th:nth-child(3),
  .tbl td:nth-child(3) { display: none; }

  .td-wallet { font-size: 11px; }

  /* ── Popup ── */
  .claim-popup {
    border-radius: 18px !important;
    padding: 24px 18px 20px !important;
  }
}

/* ══════════════════════════════════════════════════════
   SMALL MOBILE  ≤ 420px
   ══════════════════════════════════════════════════════ */
@media (max-width: 420px) {

  .hero-h1 { font-size: 30px; }

  .stats-row--three { gap: 10px; }
  .stat-block-val { font-size: 24px; }
  .stat-block-val2 { font-size: 20px; }

  .hiw-step-title { font-size: 14px; }

  /* Адрес кошелька в popup — короче */
  #popup-wallet-addr { font-size: 11px; }

  /* Nav — только лого + кнопка, без лишнего */
  .nav-claim-btn { padding: 5px 8px; font-size: 11px; }
}