/* ══ PILL ════════════════════════════════════════════════ */
.pill {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  padding:       5px 14px;
  border-radius: 999px;
  border:        1px solid var(--bd);
  background:    rgba(255,255,255,0.04);
  font-family:   var(--font-mono);
  font-size:     0.65rem;
  letter-spacing: 0.12em;
  color:         var(--t2);
  white-space:   nowrap;
}
/* Prevent stretching only inside the hero flex-column */
.hero-text .pill { align-self: flex-start; }

.dot {
  width:         5px;
  height:        5px;
  border-radius: 50%;
  background:    var(--accent-a);
  flex-shrink:   0;
  animation:     blink 2s ease-in-out infinite;
}

/* ══ BUTTONS ═════════════════════════════════════════════ */
.btn-primary {
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  padding:       10px 28px;
  border-radius: var(--r-sm);
  background:    var(--accent-a);
  color:         #06060a;
  font-family:   var(--font-sans);
  font-size:     0.85rem;
  font-weight:   400;
  border:        none;
  transition:    background var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast);
}
.btn-primary:hover {
  background:    #fff;
  box-shadow:    0 0 40px rgba(74,244,200,0.3);
  transform:     translateY(-1px);
}

.btn-ghost {
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  padding:       10px 22px;
  border-radius: var(--r-sm);
  border:        1px solid var(--bd);
  background:    transparent;
  color:         var(--t2);
  font-family:   var(--font-sans);
  font-size:     0.85rem;
  font-weight:   300;
  transition:    border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}
.btn-ghost:hover {
  border-color: var(--bd-h);
  color:        var(--t1);
  background:   rgba(255,255,255,0.04);
}

.btn-sm { padding: 7px 18px; font-size: 0.78rem; }

/* ══ GLASS ═══════════════════════════════════════════════ */
.glass {
  background:  var(--surface);
  border:      1px solid var(--bd);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition:  border-color var(--dur-fast), background var(--dur-fast);
}
.glass:hover { border-color: var(--bd-h); background: var(--surface-h); }

/* ══ CAP TAG ═════════════════════════════════════════════ */
.cap-tags { display: flex; flex-wrap: wrap; gap: 10px; }

.cap-tag {
  display:       inline-flex;
  padding:       8px 18px;
  border-radius: 999px;
  border:        1px solid var(--bd);
  font-family:   var(--font-sans);
  font-size:     0.78rem;
  font-weight:   300;
  color:         var(--t2);
  white-space:   nowrap;
  transition:    border-color var(--dur-fast), color var(--dur-fast);
}
.cap-tag:hover { border-color: var(--accent-a); color: var(--accent-a); }

/* ══ VALUE ROW ═══════════════════════════════════════════ */
.value-row {
  display:               grid;
  grid-template-columns: 150px 1fr 1fr;
  gap:                   40px;
  align-items:           start;
  padding:               36px 0;
  border-bottom:         1px solid var(--bd);
  transition:            background var(--dur-fast);
  cursor:                default;
}
.value-row:first-of-type { border-top: 1px solid var(--bd); }
.value-row:hover          { background: rgba(255,255,255,0.02); }

.value-meta { display: flex; flex-direction: column; gap: 7px; }

.big-num {
  font-family:    var(--font-mono);
  font-size:      0.65rem;
  color:          var(--t3);
  letter-spacing: 0.1em;
}

.value-title {
  font-family:  var(--font-disp);
  font-size:    1.4rem;
  font-weight:  200;
  line-height:  1;
}

.value-body {
  font-size:   0.9rem;
  line-height: 1.9;
  color:       var(--t2);
  font-weight: 300;
}

.value-tags { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; }

/* ══ ACCENT UNDERLINE ════════════════════════════════════ */
.accent-underline { display: inline-block; position: relative; }
.accent-underline::after {
  content:    '';
  position:   absolute;
  bottom:     -4px; left: 0; right: 0;
  height:     1px;
  background: linear-gradient(90deg, var(--accent-a), transparent);
}

/* ══ ANIMATIONS ══════════════════════════════════════════ */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.25; }
}
@keyframes orbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes orbit-r {
  from { transform: rotate(360deg); }
  to   { transform: rotate(0deg); }
}
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
@keyframes pulse-ring {
  0%   { transform: scale(0.9); opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ══ RESPONSIVE ══════════════════════════════════════════ */
@media (max-width: 900px) {
  .value-row { grid-template-columns: 1fr; gap: 16px; padding: 28px 0; }
}